Webpagina’s worden meestal ontworpen om te worden weergegeven op een normaal computer scherm. Er komen echter steeds meer media, te denken valt aan telefoon, pda’s, maar ook voorleescomputer voor slechtzienden en blinden. En dan is er nog een oud veel gebruikt medium: de printer. Met CCS-2 is het mogelijk om verschillende stijlen/lay-outs te gebruiken voor verschillende media.
Een webpagina verandert vaak in een chaos als deze geprint wordt. Hoe vaak stuitert de helft van de pagina niet van het papier af? Dit nog afgezien van overbodig navigatie menu’s en advertenties. Veel sites maken gebruik van aparte ‘print vriendelijke’ versies van een pagina.. Echter door het simpel uitbreiden van een bestaande stylesheet, of het toevoegen van een tweede is het mogelijk de pagina anders weer te geven. Probeer het uit met deze pagina via het ‘Print voorbeeld/Print preview’ onder het ‘Bestand/File’ menu links boven. Als het goed is zie je alleen nog de tekst, en in een goede moderne browser (o.a. Firefox) nog een melding. gelukkig zit er dan nog wel verschil tussen hetgeen in de preview mode wordt weergegeven en wat er daadwerkelijk geprint wordt, en ja er zit nog een foutje in het weergeven van de blokken met code
Alvorens te beschrijven hoe het definiëren van media types werkt wat achtergronden
Media stylesheets worden ondersteund door Firefox,Mozillla,Internet Explorer 5+ en Opera 7. Het oude Netscape 4 doet niet mee, het negeert het.
Er zijn tien verschillende media types W3C:
Er zijn verschillende manieren om de stylesheet mee te geven, deze verschillen niet van de manier waarop normaal ook stijlen worden gedefinieerd. Afwijkend is de conditionele @media
<link rel="stylesheet" type="text/css" href="master.css" media="all">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
Om oudere browsers niet te verwarren kun je of de media="all" weglaten en/of gebruiken om een style definitie te geven voor deze oude browsers
<link rel="stylesheet" type="text/css" href="ccs1.css" >
<link rel="stylesheet" type="text/css" href="ccs2.css" media="all">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<style type="text/css" media="handheld">
@import "../small.css";
</style>
<style type="text/css">
@media print {
h1 {font-size: 22pt; background: white; }
}
</style>
@media print {
.wikileft {display:none)
}
Met het stylesheet element display is het mogelijk delen van een pagina te verbergen voor een bepaalt media type. In het geval van deze site staat links een navigatie menu, niet zinvol om te printen, de reclame kan ook weg als er niet geklikt kan worden heeft dat weinig nut::
.wikistuff {display:none}
.wikibanner{display:none}
Achtergrond kleur niet nodig bij het printen dat kost alleen maar inkt, kleine marge gewenst:
body {background: none #fff;margin:.5em}
Het praktische van stylesheets is dat in de stylesheet voor een specifieke media alleen de verschillen met de gemeenschappelijk stylesheet hoeven te staan. Als je website goed is opgezet zijn vaak maar een paar stijl elementen nodig. Voor deze site slechts 3 extra regels.
Eventueel kun je het lettertype ook aanpassen, schreef loze sans-serif) lettertypes zien op het het scherm vaak beter uit. Geprint komt een lettertype met schreef beter tot zijn recht. (Een schreef is het korte dwars-streepjes aan het einde van de lijntjes waaruit een leter bestaat). Typische schreefloze lettertype zijn: Arial, Helvetica en Verdana, met schreef zijn bekende soorten Times New Roman, Palatino en Georgia. met behulp van de font-family kun je dit instellen.
body {
font-family: Georgia,Palatino,"Times New Roman",serif;
}