Print media queries not working?

Have you checked the media attribute?

The other day I was trying to speed up the page load times of a website by improving front end code performance. Spotting an opportunity to eliminate a HTTP request, I moved the print styles from a separate print stylesheet into the main CSS file and wrapped them in a print media query:

@media print {
    print styles here
}

However, when print previewing the print styles were no longer appearing. After far too long debugging, I finally figured out that the print styles weren’t being applied because the link to the main stylesheet had a media attribute with the value of “screen, projection”…

<link href="http://yourdomain.com/styles.css" media="screen, projection" rel="stylesheet" type="text/css" />

After changing this to…

<link href="http://yourdomain.com/styles.css" rel="stylesheet" type="text/css" />

…print styles were finally displayed. This took about 3 hours of my life so I’m posting this in the hope that it will help prevent someone else banging their head against their desk when their print styles aren’t working.

Side note: Debugging print styles is not the easiest thing in the world – you can’t inspect elements in print preview mode. I found that Firefox’s Web Developer Toolbar can help you here: CSS > Display Styles by Media Type will only display print styles, allowing you to debug and design in the browser.

13 Responses so far.

  1. John says:

    Thanks for posting this. I was on my way to spending 3 hours myself when I found your solution, and then all was well again.

  2. I’m having a similar problem but with no screen media query just a plain old linked CSS file with a print media query at the bottom. Chrome works perfectly but Firefox is ignoring it. Thankfully it’s not a big deal as the site looks perfect in print but I just thought that it might make the odd user happy that they didn’t waste a whole sheet of paper printing out a footer and a newsletter sign up form.

  3. Andy says:

    You’re a lifesaver – I was pulling my hair out adding !important, checking and re-checking syntax and specificity – Many thanks.

  4. Just add print to the media attrib and it will work like so

    media=”screen, projection, print”

  5. Saxon says:

    Thanks! Potentially saved me a lot of time!

  6. Tom says:

    You saved my life… and a lot of time;) Thanks!

  7. Phil Hulme says:

    You’re still saving the world – well saving the world’s developers hours of coding at least.

  8. Ric says:

    So annoyingly obvious in hindsight… thanks for saving me the 3 hours. :)

  9. rigoxls says:

    hi, thanks a lot for this tip, it was so helpful…

  10. Kevin says:

    Thanks very much, you saved me a few hours and a headache

  11. Terry Upton says:

    Thanks for this post. Probably just saved me a few hours trying to fix this.

  12. Brendan Rice says:

    Hey Lawrence, thanks for this post! I had the same issue and it was driving me crazy. Thanks so much.

  13. Robert Mitchell says:

    One more person saying THANKS!!

    I’ve spent about an hour trying to find this problem. Your post saved me the next 2.

Leave a Reply