Mediatypes

Door gebruik te maken van mediatypen kun je aangeven hoe het media-element getoond moet worden. Het document/element wordt verschillend getoond op papier of op een scherm maar ook in een aral (=gehoor) web browser. Meer informatie over Aural browser vind je hier
Sommige CSSdocumenten zijn alleen maar bedoeld voor een bepaald mediatype, met mediatype bedoelen we: Geluid, beeldschermen, beamers, televisies enzovoort, eigenlijk alles waarmee je iets kunt bekijken/beluisteren. Het is dus zeer belangrijk dat je het goede mediatype aangeeft anders wordt het document/element niet mooi getoond! Een font (lettertype)element kan bijvoorbeeld op verschillende mediatypes getoond worden. Als je de pagina uitprint dan wordt dat lettertype meegeprint, op het beeldscherm zie je het verschil. Zelfs bij een beamerpresentatie zul je het verschil zien. Maar in een Aural browser zul je geen verschillende lettertypes zien. Meestal heeft een document op eens scherm een langer lettertype nodig dan als je het zou uitprinten. Dat heeft met de pixels te maken. Als je bijvoorbeeld deze pagina uit zou printen zie je dat deze letters bij het uitprinten best nog wel kleiner zouden mogen. Je kunt dit ook instellen in de bron namelijk met de @media functie! Zie hier:
<style>
@media screen
{
p.test {font-family:verdana; font-size:14px}
}

@media print
{
p.test {font-family:verdana; font-size:10px}
}
@media screen,print
{
p.test {font-weight:bold}
}
</style>
Je ziet dat het lettertype verandert bij het printen! Alles wat tussen <p class="test"> en </p> staat verandert tussen het printen en het weergeven op het scherm. Dat is ook veel beter want anders zou het veel te groot worden weergegeven op papier. Let wel op: veel functies worden pas vanaf Internet Explorer versie 5.5 en Netscape 7.0 ondersteund.
Verschillende media typen: