HTML-Hajen

Adaptive design og media queries (CSS)








Flere style sheets og/eller media queries (adaptive design)

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.


Mediatyper

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:

MediatypeApparattype
allAlle apparater bruger denne
brailleBrugt til braille tactile feedback devices, dvs. apparater der giver respons med relieffer der kan mærkes.
embossedBrugt til braille-printere.
handheldBrugt til håndholdte apparater (Smartphones og tablets bruger IKKE denne mediatype!).
printBrugt til udskrifter, herunder også når sider vises som "vis udskrift".
projectionBruges til projektorer/beamere.
screenTil skærme, f.eks. også tablets og smartphones.
speechBruges til tekst-til-tale-emulatorer.
ttyBrugt til medier med fastlåst bredde på karaktererne (f.eks. telex/fjernskrivere og visse typer af terminaler).
tvBruges til fjernsynslignende apparater (dvs. lav opløsning, farve, begrænsede muligheder for scrolling på skærmen, med mulighed for lyd).


VariabelEffekt
widthBredden af det aktuelle vindue (i pixels)
heightHøjden af det aktuelle vindue (i pixels)
device-widthBredden af det aktuelle apparats skærm (i pixels)
device-heightHøjden af det aktuelle apparats skærm (i pixels)
orientationEr siden orienteret i landscape eller portrait
aspect-ratioStørrelsesforholdet mellem højde og bredde i det aktuelle vindue
device-aspect-ratioStørrelsesforholdet mellem højde og bredde på den aktuelle skærm
colorAntallet af color bits pr. color component
color-indexAntal farver apparatet kan vise
monochromeAntal bits pr. pixel in a monochrome frame buffer
resolutionApparatets skærmopløsning, enten som dots per inch (dpi) eller dots per centimeter (dpcm)
scanEr billedvisningen progressive eller interlaced
gridEr 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:

VariabelEffekt
max-widthMaksimal bredde af det aktuelle vindue (i pixels)
min-widthMinimumsbredde af det aktuelle vindue (i pixels)
max-heightMaksimal højde af det aktuelle vindue (i pixels)
min-heightMinimumshøjden af det aktuelle vindue (i pixels)
max-device-widthMaksimal bredde af det aktuelle apparats skærm (i pixels)
min-device-widthMinimumsbredde af det aktuelle apparats skærm (i pixels)
max-device-heightMaksimal højde af det aktuelle apparats skærm (i pixels)
min-device-heightMinimumshøjde af det aktuelle apparats skærm (i pixels)
max-aspect-ratioMaksimalt størrelsesforhold mellem højde og bredde i det aktuelle vindue
min-aspect-ratioMinimumstørrelsesforholdet mellem højde og bredde i det aktuelle vindue
max-device-aspect-ratioMaksimalt størrelsesforhold mellem højde og bredde på den aktuelle skærm
min-device-aspect-ratioMinimumstørrelsesforholdet mellem højde og bredde på den aktuelle skærm
max-resolutionMaksimal skærmopløsning på apparatet
min-resolutionMindste 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:

<LINK REL="stylesheet" HREF="GenereltLayout.css" TYPE="text/css" MEDIA="all" />
<LINK REL="stylesheet" HREF="PrinterVenlig.css" TYPE="text/css" MEDIA="print" />

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

@media print {
}

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:

@media print {
NAV {
display:none;
}
}

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:

H1 {
font-size:24.0pt;
}

@media screen and (max-device-width: 960px) {
H1 {
font-size:18.0pt;
}
}

@media screen and (max-device-width: 480px) {
H1 {
font-size:12.0pt;
}
}

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.

-webkitGoogle Chrome og Apple Safari
-mozMozilla Firefox
-oOpera
-msMicrosoft 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.


Internet Explorer 8 og tidligere

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:

<!--[if IE 8]>
Koden som Internet Explorer 8 skal læse indsættes her
<![endif]-->

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

<!--[if lte IE 7]>
Koden som Internet Explorer 7, og tidligere, skal læse indsættes her
<![endif]-->

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).

<LINK HREF="Layout.css" REL="stylesheet" TYPE="text/css">
<!--[if IE 8]>
<LINK HREF="LayoutIE8.css" REL="stylesheet" TYPE="text/css">
<![endif]-->
<!--[if lte IE 7]>
<LINK HREF="LayoutIE7.css" REL="stylesheet" TYPE="text/css">
<![endif]-->

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:

H1 {
font-size:24.0pt;
font-weight:bold;
font-style: italic;
margin-left:50px;
<!--[if IE 8]>
margin-left:45px;
<![endif]-->
<!--[if lte IE 7]>
margin-left:55px;
<![endif]-->
}