Printervriendelijke pagina’s maken

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>

Ik geloof je heus wel!

Je zit echt niet te wachten op weer een saaie nieuwsbrief...
Met allerlei oninteressante informatie.
Maar echt, als je mijn mails probeert, dan beloof ik je te helpen met de zoektocht naar jouw perfecte niche! Zodat jij een website kunt maken rond jouw favoriete onderwerp of idee!
En je krijgt meteen toegang tot mijn gratis downloads. Proberen? Meld je hieronder aan!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.