Adaptive design og media queries (CSS)

Af forskellige årsager kan det være en fordel, at have flere style sheets til at håndtere forskellige funktioner, opsætninger og/eller browsere. Med introduktionen af smart phones og tablets, hvor skærmene er betragteligt mindre end på almindelige arbejdscomputere, er det blevet ekstra vigtigt at have et design der enten tåler at blive skaleret ned til nogle få tommer, eller som kan tilpasse sig efter typen af computer og/eller skærmstørrelse. Det kan også være noget så lavpraktisk, som at ved udskrifter, er det kun det relevante man skriver ud, f.eks. overskrift og brødtekst, mens navigationspanel og reklamer ignoreres. Det er det der hedder adaptive design.

Der er flere løsninger på adaptive design, og da form følger funktion, er valget af løsning et spørgsmål om hvad man skal have lavet.

Til LINK-tag'en har man attributten MEDIA, og til hvert MEDIA har man en variabel, som man kan selektere på. Man kan derfor have et specifikt style sheet for f.eks. udskrifter, hvilket der hvor hjemmesider oftest kommer til at se underlige ud. Default for MEDIA er 'all', uden variabler, og man har flg. muligheder for MEDIA og variabel:

Mediatype	Apparattype
all	Alle apparater bruger denne
braille	Brugt til braille tactile feedback devices, dvs. apparater der giver respons med relieffer der kan mærkes.
embossed	Brugt til braille-printere.
handheld	Brugt til håndholdte apparater (Smartphones og tablets bruger IKKE denne mediatype!).
print	Brugt til udskrifter, herunder også når sider vises som "vis udskrift".
projection	Bruges til projektorer/beamere.
screen	Til skærme, f.eks. også tablets og smartphones.
speech	Bruges til tekst-til-tale-emulatorer.
tty	Brugt til medier med fastlåst bredde på karaktererne (f.eks. telex/fjernskrivere og visse typer af terminaler).
tv	Bruges til fjernsynslignende apparater (dvs. lav opløsning, farve, begrænsede muligheder for scrolling på skærmen, med mulighed for lyd).

Variabel	Effekt
width	Bredden af det aktuelle vindue (i pixels)
height	Højden af det aktuelle vindue (i pixels)
device-width	Bredden af det aktuelle apparats skærm (i pixels)
device-height	Højden af det aktuelle apparats skærm (i pixels)
orientation	Er siden orienteret i landscape eller portrait
aspect-ratio	Størrelsesforholdet mellem højde og bredde i det aktuelle vindue
device-aspect-ratio	Størrelsesforholdet mellem højde og bredde på den aktuelle skærm
color	Antallet af color bits pr. color component
color-index	Antal farver apparatet kan vise
monochrome	Antal bits pr. pixel in a monochrome frame buffer
resolution	Apparatets skærmopløsning, enten som dots per inch (dpi) eller dots per centimeter (dpcm)
scan	Er billedvisningen progressive eller interlaced
grid	Er apparatet grid-baseret?

Variablerne findes for visse af dem i udvidede udgaver med minimum og maksimum. Dette er dem jeg kender til, men der kan være flere:

Variabel	Effekt
max-width	Maksimal bredde af det aktuelle vindue (i pixels)
min-width	Minimumsbredde af det aktuelle vindue (i pixels)
max-height	Maksimal højde af det aktuelle vindue (i pixels)
min-height	Minimumshøjden af det aktuelle vindue (i pixels)
max-device-width	Maksimal bredde af det aktuelle apparats skærm (i pixels)
min-device-width	Minimumsbredde af det aktuelle apparats skærm (i pixels)
max-device-height	Maksimal højde af det aktuelle apparats skærm (i pixels)
min-device-height	Minimumshøjde af det aktuelle apparats skærm (i pixels)
max-aspect-ratio	Maksimalt størrelsesforhold mellem højde og bredde i det aktuelle vindue
min-aspect-ratio	Minimumstørrelsesforholdet mellem højde og bredde i det aktuelle vindue
max-device-aspect-ratio	Maksimalt størrelsesforhold mellem højde og bredde på den aktuelle skærm
min-device-aspect-ratio	Minimumstørrelsesforholdet mellem højde og bredde på den aktuelle skærm
max-resolution	Maksimal skærmopløsning på apparatet
min-resolution	Mindste skærmopløsning på apparatet

Måden man bruger det på, er enten at lave et separat LINK med sit eget style sheet, eller et media query.

LINK, f.eks. udskrifter der formateres efter det style sheet der hedder PrinterVenlig.css, er blot en linje efter det link man bruger til det generelle layout:


Media query er afsnit i det style sheet man bruger til sin almindelige formatering af sitet:


Som det ses, minder syntax'en om at definere en klasse, blot man bruger snabel-a i stedet for et punktum. I virkeligheden er det mere som at lave et style sheet inde i det eksisterende style sheet, fordi man specificerer sine tags og attributter, f.eks. hvis man i sin udskrift ikke vil have navigationsafsnittet (NAV-tag'en) med:


Lige nøjagtig printfunktionen er en af de funktioner hvor man med fordel kan anvende LINK i stedet for media query, da en del ældre browsere ikke kan anvende media query (bl.a. IE8 og tidligere), men uden problemer anvender LINK, kan det til print-funktionen være bedre at anvendes LINK.

Udvidelserne med minimum og maksimum er der hvor man virkelig kan arbejde med de forskellige typer af computere, i forhold til om det er en bærbar, en tablet eller en smartphone. Især fordi mediatyper og variabler kan kombineres. Mediatyper og variabler kombineres med "and".

Hvis vi ser på et eksempel, så vil man på en computer med en skærm med høj opløsning godt kunne bruge en fontstørrelse på 24pt til sin hovedoverskrift (H1-tag'en). Til en lavere opløsning, går det galt, og størrelsen bliver for voldsom, så her skal man bruge en mindre font, for at bevare læsbarheden af siden. Her er et eksempel, hvor der tages højde for tre forskellige skærmopløsninger:


Der er pt. ikke en måde specifikt at detektere på smartphones, tablets eller PC'er, hvilket ellers ville give god mening, men med en kombination af device-width, aspect ratio og resolution, kan man få en hensigtsmæssig sortering på de forskellige skærmtyper/størrelser.

En af de mere alternative måder at selektere på er browsertypen, dvs.

-webkit	Google Chrome og Apple Safari
-moz	Mozilla Firefox
-o	Opera
-ms	Microsoft Internet Explorer (kun ver. 9 og senere)

hvis man således skal have noget der er specifikt for Firefox på en skærm der er højest 960 pixels i bredden, bliver det så -moz-max-device-width: 960px. Det vil især være ting som f.eks. lodret skrift, hvor placeringen er meget browserafhængig, hvor det giver mening at bruge denne mulighed.

Generelt må man sige, at valget af flere css-filer eller media query er helt et spørgsmål hvad og hvor meget man skal ændre mellem de forskellige medier. Meget store og komplekse css-filer kan være mere besværlige at vedligeholde, til gengæld skal man ikke ind og tilføje en ny linje med LINK på alle siderne på ens site. I praksis vil de fleste nok ende med at bruge en kombination af de to.

Det er således, at Internet Explorer 8 og tidligere ikke kan anvende MEDIA-tag'en, som vi lige har gennemgået. Her benytter man sig af et andet trick. I dag er det et lille problem, fordi disse browsere er forsvundet sammen med afviklingen af Windows XP, men der er stadig nogle få der ude i Verden, der bruger disse browsere. Så for dem der vil kompensere for dette, here goes:

Browsere læser css-filer fra toppen og ned efter. Hvis den samme tag bliver udstyret med to forskellige værdier for den sammen attribut, så er det den sidste, som bliver anvendt. Fordi Internet Explorer er en af de browsere der kan læse det der hedder conditional comments, man gøre det, at man først indlæser en generel css-fil, og hvis man har en Internet Explorer der kræver noget andet, overskriver man værdierne, med de nye værdier der måtte være brug for.

Udviklingen fra Internet Explorer 6 til 7 er ret lille, mens der var en del udvikling fra 7 til 8, så man kan forvente, at skulle have to spor, et til håndtering af Internet Explorer 8, og et der håndterer til og med Internet Explorer 7.

Koden for "Hvis Internet Explorer 8" er:


Koden for "Hvis Internet Explorer 7 eller tidligere" er:


Koden kan anvendes på to måder, og hvilken af dem man bruger, er en smagssag. Begge har deres fordele og ulemper i forhold til ens struktur og indhold af hjemmesiden.

Den første, og den som jeg selv har brugt, er at lave tre separate css-filer. En der håndterer det generelle, lad os kalde den Layout.css, og to der håndterer hhv. Internet Explorer til og med 7 (kalder vi LayoutIE7.css) og Internet Explorer 8 (kalder vi LayoutIE8.css).


Bemærk! I de to css-filer der håndtere de gamle versioner af Internet Explorer, skriver man kun de attributter der skal ændres i forhold til det der står i Layout.css-filen. At skrive alt det andet, giver ikke andet end problemer med vedligeholdelse af hjemmesiden.

Husk, at fordi koden læses fra toppen og ned, skal conditional comments være efter style sheetet der håndterer det generelle layout.


Den anden måde at bruge conditional comments på, er direkte i css-filen. Lad os sige, at for tag'en H1, skal venstremargin normalt være 50 pixels i bredden, mens den for Internet Explorer 8 skal den være 45 pixels og Internet Explorer 7 og tidligere skal den være 55 pixels. For alle browsere skal teksten være fed, i kursiv og med font-størrelsen 24.0pt. Så ser det således ud i css-filen: