Printervriendelijke pagina’s maken

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 type Omschrijving
all Geschikt voor alle media
braille Geschikt voor braille toepassingen
embossed Geschikt voor braille printers
handheld Geschikt voor handhelds
print Geschikt voor print previews op een beeldscherm
projection Geschikt voor geprojecteerde presentaties
screen Geschikt voor computerschermen
speech Geschikt voor spraaktoepassingen
tty Geschikt voor media die een beperkte weergavemogelijkheid hebben
tv Geschikt 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>

          Leuk als je dit artikel deelt:
Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *