Tegenwoordig komen er steeds meer en meer apparaten bij waarop websites bekeken kunnen worden; televisies, mobiele telefoons, e-readers en diverse andere apparaten. Vandaag gaan we kijken hoe we voor elk van deze apparaten een aparte stylesheet kunnen toepassen. Dit doen we met zogenaamde 'media types'. Dit is een type stylesheet dat kenmerkend is voor een bepaald apparaat. Ook kijken we hoe media queries in CSS3 werken en hoe je dit kunt toepassen op mobiele apparaten zoals bijvoorbeeld de iPhone.

Welke media types zijn er?

Hieronder vind je een lijstje van verschillende media types die in vrijwel alle browsers bruikbaar zijn:

• all: Voor alle apparaten
• braille: Voor 'braille'-apparaten.
• embossed: Voor printers die braille-pagina's kunnen printen.
• handheld: Voor kleinere apparaten met vaak kleine schermen en een lage bandbreedte.
• print: Voor printers, de stylesheet wordt ook gebruikt in de 'Afdrukvoorbeeld'-modus. Print je de website uit, dan wordt deze stylesheet gebruikt.
• projection: Voor projectors.
• screen: De meest gebruikte, het normale (computer)scherm.
• speech: Voor zogenaamde speech synthesizers.
• tty: Voor apparaten als terminals of mobiele apparaten met beperkte weergave-mogelijkheden.
• tv: Voor televisies (lage resolutie, kleurenscherm, geen of beperkte scroll-mogelijkheden, geluid aanwezig).

Hoe te gebruiken?

Deze zijn vervolgens op twee manieren te gebruiken. Er zijn ook meerdere media types tegelijk te gebruiken, je scheidt ze dan door een komma. Bekijk de twee manieren hieronder.

Manier 1:

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="print.css" rel="stylesheet" type="text/css" media="print" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen, print" />

Manier 2 (in je stylesheet zelf):

@media print {
   body { font-size: 10px; }
}

@media screen {
   body { font-size: 13px; }
}

@media screen, print {
    body { line-height: 15px; }
}

Nieuwe 'Media Queries' in CSS3

In CSS3 zijn enkele nieuwe mogelijkheden beschikbaar, waaronder de detectie van de 'orientation mode', vooral bekend van de iPhone waarbij een apparaat in zowel de 'portrait' of de 'landscape' modus wordt gehouden:

@media screen and (orientation:portrait) {
    /* Portrait styles */
}

@media screen and (orientation:landscape) {
    /* Landscape styles */
}

Dit werkt uiteraard ook:

<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css">

Stylesheets bij bepaalde hoogte en breedtes van vensters en apparaten

Ook kun je styles aanduiden die in de huidige weergave maar een bepaalde hoogte en/of breedte kan weergeven. Als je browser bijvoorbeeld 795 pixels breed is, doordat je het venster hebt verkleind/geresized, dan wordt díe style weergegeven. Nog niet duigelijk, bekijk dan onze demo eens:

<link rel="stylesheet" media="screen and (max-width: 800px)" href="small.css" />
<link rel="stylesheet" media="screen and (min-width: 200px) and (max-width: 800px)" href="small.css" />

Of:

@media screen and (max-width: 800px) {
    body { background: #FFF; }
}

@media screen and (min-width: 200px) and (max-width: 800px) {
    body { background: #FFF; }
}

Ook kun je aangeven of een bepaalde style geladen moet worden bij een bepaalde maximum hoogte en/of breedte dat het apparaat zelf kan weergeven. De volgende code werkt bijvoorbeeld perfect voor de iPhone:

@media screen and (max-device-width: 480px) {
    body { background: #FFF; }
}

Speciaal voor de iPhone 4:

En tot slot sluiten we nog af met een speciale media query voor de iPhone 4:

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

Demo

Hier vind je een demo van de min/max-width, min/max-height media query in CSS3. Let wel op: je browser moet CSS3 ondersteunen (Chrome en Safari werken zeker).