CSS - Printpagina, printvriendelijk


Bij het uitprinten van websites worden afhankelijk van de websitebouw veel kleuren gebruikt en ook diverse afbeeldingen etc. als je deze uitprint. Door middel van CSS kun je een aparte Print CSS instellen die alleen wordt gebruikt voor het afdrukken van pagina's. Dit doe je het handigst met een externe stylesheet maar kan ook gewoon inline. Waar je hier meer informatie over vind. Je roept de externe print CSS op dezelfde manier op in principe als de normale stylesheet, echter is er een kleine wijziging in de code. Je geeft hier als media, "print" mee waardoor de stylesheet automatisch wordt herkend alszijnde te gebruiken voor het afdrukken van de pagina.

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


Bij bijvoorbeeld een interne Stylesheet pas je dat dan toe als volgt,

<style type="text/css" media="print">
.classnaam {
padding: 0px;
padding-left: 10px;
}
</style>


Als je dit hebt ingesteld, pas je de CSS aan naar eigen wens om zo de gebruiker een printvriendelijke versie van je website aan te bieden. Zo kun je bijvoorbeeld het handigst je huidige stylesheet nemen en deze kopieren en vervolgens per class / onderdeel aangeven wat deze wel en niet moet tonen. Om een element geheel uit te schakelen bij een afdruk van de pagina gebruik je dan "display:none;" zoals hieronder in het voorbeeld.

.classnaam {
display:none;
}


Verder kun je aanvullende eigenschappen meegeven zoals het uitschakelen van achtergrondafbeeldingen of een achtergrondkleur en het wijzigen van het lettertype, grootte etc. zoals je dat normaal ook instelt bij een normale opmaak van je pagina. Het is overigens ook verstandig om de opmaak van links uit te schakelen omdat deze uiteraard niet werken op een print evenals eventueel de navigatie zodat de content overblijft.

Je kunt het resultaat van je CSS bekijken door naar Afdrukvoorbeeld te gaan in de browser.
Delen: