printervriendelijk in css
Een van de voordelen van CSS is dat je vooraf kunt bepalen hoe je site er uit gaat zien
op het scherm. Maar dit is niet alleen mogelijk voor het scherm, je kunt ook aparte stylesheets
maken voor zogenaamde handhelds of bijvoorbeeld voor spraakprogramma’s. Wat ook handig is
is het onderdeel van CSS speciaal voor een printversie van een pagina.

Eerst even alle media types op een rij.

Media typeOmschrijving
allGeschikt voor alle media
brailleGeschikt voor braille toepassingen
embossedGeschikt voor braille printers
handheldGeschikt voor handhelds
printGeschikt voor print previews op een beeldscherm
projectionGeschikt voor geprojecteerde presentaties
screenGeschikt voor computerschermen
speechGeschikt voor spraaktoepassingen
ttyGeschikt voor media die een beperkte weergavemogelijkheid hebben
tvGeschikt voor televisie typen

Natuurlijk kun je een en dezefde stylesheet gebruiken voor alle mediavormen.
Dat doe je als volgt:

<link rel="stylesheet" type="text/css" href="stijl.css" media="all" />

Zo kun je ook twee verschillende mediatypen aanspreken, eenvoudigweg door een komma
te gebruiken, dat is dus als volgt:

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

In bovenstaand voorbeeld wordt het betreffende stijlblad weergegeven als de pagina wordt
geprojecteerd, of als er een afdruk via de computer van wordt gemaakt. Overigens kun je
deze manier ook aanroepen met @import, dat gaat dan als volgt:

@import url(print.css) print,projection;

Wanneer je meerdere media in een stijlblad wilt hebben, kun je dat ook nog als volgt doen:

<style type="text/css">
@media print {
body {
font-size: 12px;
color: black;
background-color: white;
}
}
@media screen {
body {
font-size: medium;
color: white;
background-color: black;
}
}
</style>

Wil of heb jij ook een website?

  • Krijg elke dinsdag tips en ideeën voor je website
  • Ontvang het ‘Het Complete Blog Ideeën boek‘ helemaal voor niks
  • Iedere week een update van nieuwe artikelen op mijn website

Meld je ook aan!