Video: Technology Stacks - Computer Science for Business Leaders 2016 2024
Siden CSS versjon 2 har det vært mulig å lage stiler som er spesifikt målrettet mot forskjellige enheter ved å endre medietypen. For eksempel er det vanlig å lage et spesielt stilark for skrivere som fjerner bakgrunnsbilder og andre designelementer som kan gjøre en side vanskelig å lese når den skrives ut.
CSS 3 tar denne ideen et skritt videre, noe som gjør det mulig å målrette iPad og iPhone i stående og liggende retninger. Den Jelly Rancher-siden som brukes her som et eksempel, inneholder to sett med stiler: Ett sett med stiler virker godt i de nyeste skrivebordsbrowserne, og de ekstra stilarkene er designet for iPhone og iPad.
Her ser du resultatet av å bruke to stilarkark for å få den samme HTML-siden til å vise forskjellig i liggende og stående modus.
Denne siden ble startet ved å lage et stilark designet for desktop-nettlesere som heter hoved. css. Det stilarket er koblet til siden med følgende kode:
Følgende lenker ble lagt til stilarkene som ble opprettet for landskaps- og portrettmodusene på iPad og iPhone. Vær oppmerksom på at CSS 3 ikke spesifikt inneholder en måte å målrette mot iPad eller iPhone på, men du kan bruke CSS 3 til å målrette mot hvilken som helst skjermstørrelse.
Nettstedene rettet mot iPhone og iPad ved å angi maksimale og minste bredder som er lik størrelsen på hver enhet. For å skille mellom stilark, ble orienteringen lagt til for å identifisere hvilket stilark som skal brukes av nettleseren når enheten er i stående eller liggende modus.
Her er linkene til de to stilarkene for iPad:
Notater er inkludert i koden mellom kommentar koder for å gjøre det enkelt å identifisere de forskjellige stilarkene i HTML. For eksempel linjen
Her er koblingene til de to stilarkene for iPhone:
