@media print not working – Solved

Internet

@media print not working? As soon as you want to print the website, all CSS expires? That can drive you crazy, but luckily we found the solution. @media print probably works, but your site doesn’t read the lines in your stylesheet because you locked out the stylesheet in print mode. How is that possible? Check how you call up the stylesheet. Most likely your HTML link will contain the following in the header of your page:

media=”screen”

The complete link will then look something like this:

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

You can include an @media print in the stylesheet with all the rules you want, but because you indicate in the HTML link that the entire stylesheet should only be opened when it concerns a screen and not a print or other version, the rule for the print, print preview or print to pdf will never be read.

@media print { The solution is simple

  1. create a separate stylesheet for the print styles;
  2. place a new link in the header of your page under the link that calls the other stylesheet and put the piece media=”print”

Just an example:

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

Background colors

Background colors are often ignored by the browsers. You can use box shadow with inset as bypass for this:

box-shadow:  0 0 0 1000px rgba(236,236,236,1) inset;

!important

It is also possible that some rules are not included because, for example, you also have various style rules inline. These are then loaded later than your stylesheet for printing and thus have the last word. If you want to overrule this, you can use !important behind those lines.