@media print werkt niet? Zodra je de website wilt afdrukken vervalt alle CSS? Daar kun je gek van worden, maar gelukkig hebben we de oplossing gevonden.
@media print werkt waarschijnlijk wel gewoon, maar je site leest de regels in je stylesheet niet omdat je de stylesheet in de printmodus hebt buitengesloten. Hoe kan dat?
Controleer even hoe je de stylesheet oproept. Hoogts waarschijnlijk staat er namelijk in je HTML link in de header van je pagina het volgende:
media=”screen”
De complete link ziet er dan ongeveer zo uit:
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />Je kunt dan wel heel leuk in de stylesheet een @media print meenemen met allemaal regeltjes, maar omdat je in de HTML link aangeeft dat de hele stylesheet alleen geopend moet worden wanneer het om een scherm gaat en niet om een papiere versie zullen de regels in het geval van een afdruk, print previeuw of print to pdf nooit gelezen worden.
@media print { De oplossing is simpel
- maak een aparte stylesheet aan voor de print styles;
- plaats een nieuwe link in de header van je pagina onder de link die de andere stylesheet aanroept en zet daarin het stukje media=”print”
Even een voorbeeld:
<link href="print.css" rel="stylesheet" type="text/css" media="print" />Achtergrond kleuren
Achtergrond kleuren worden vaak door de browsers genegeerd. Je kunt hiervoor box shadow met inset gebruiken als bypass:
box-shadow: 0 0 0 1000px rgba(236,236,236,1) inset;!important
Verder kan het zijn dat sommige regels niet worden meegenomen omdat je bijvoorbeeld inline ook diverse style regels hebt staan. Deze worden dan later geladen dan jouw stylesheet voor het printen en hebben dus het laatste woord. Wil je dit overrulen dan kun je achter die regels !important gebruiken.
