CSS voor het printen van pagina’s

Voor sommige websites is het best dat je een printvriendelijke versie maakt. Dit is zeer gemakkelijk te realiseren door met HTML een speciaal CSS bestand op te halen. Een CSS bestand waarmee je verschillende onderdelen van je webpagina weghaalt. Je moet er voor zorgen dat je alleen de inhoud overhoud, delen van de layout (menu, sidebar) kunnen weg.

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

Als je de bovenstaande code tussen de head tags van je pagina plaatst, kan je het bestand print.css gebruiken als print stylesheet. Zoals je ziet doen we dat op dezelfde manier zoals we een gewone stylesheet invoegen. Het verschil zit hem in het attribuut media. Deze geven we de waarde print.

Nu zullen we in de CSS enkele waarden instellen.

body {
margin:0;
padding:0;
background-image:none;
background-color:#FFF;
color:#000;
}

Eerst zetten we de marges en padding op nul. Daarna halen we de eventuele achtergrond afbeeldingen weg. De achtergrond kleur maken we wit en de tekst zwart. Deze stappen zorgden ervoor dat alles door iedereen uitgeprint kan worden.

Nu moeten we nog een stukken weghalen, stukken die niet afgedrukt moeten worden. In het voorbeeld zullen we de sidebar, de afbeeldingen en de footer weghalen.

#sidebar, #footer, img {
display:none;
}

Alles in één bestand

Het is ook mogelijk om je printvriendelijke CSS in je bestaande stylesheet te zetten. Zo hoef je dus geen tweede stylesheet aan te maken. Om dit voor elkaar te krijgen kun je onderstaande code gebruiken.

@media print{
/* Hier komt je CSS voor het printen */
}
 
/* Hier zet je gewone CSS code */

Zelf kan je natuurlijk nog veel verder gaan. Probeer eens iets en laat het ons zien.