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="" media="screen, projection" rel="stylesheet" type="text/css" />

After changing this to…

<link href="" 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.

32 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.

  14. Viktor says:

    Muchos gracias amigo!

    Nice timesaving tip!

  15. thank you for sparing me 3 hours 😉

  16. Gernot says:

    thx – you saved my evening!

  17. Gportes says:

    Thanks ! :)

  18. hupu says:

    This saved my day also.
    I found this post after half an hour, so it supposedly saved me 2,5 hours.
    Anyway, biiig thanks!!!

  19. JP says:

    Thanks for the tip!

    Who knows how long I would have spent trying to figure out why my @media print query wasn’t working…

  20. Douglas says:

    Thanks man! Saved me a lot of debugging :)

  21. flobberworm says:

    Thank you! I had no idea why @media print wouldn’t work till I saw you post. =)

  22. Lauren says:

    Just saved me a ton of time, also – thanks!!

  23. Gareth says:

    Thank you – your post enabled me to debug this issue in 2 minutes rather than 20 minutes!

  24. Philip Abbott says:

    The least you deseeve is a thank you. I could have been messing around with this all day. Very much appreciated.

  25. Pascal Conil-lacoste says:

    You saved what hair I have left. Thanks.

  26. […] even tried this: but it still doesn’t work. It’s driving me crazy, any […]

  27. Rick Bond says:

    Yes, saved me too. Thank you!

  28. Ruslana says:

    Thank you!It was very helpful!

  29. Sophie says:

    Thank you so much!

  30. John says:

    Thank you so much!

  31. Manirathinam says:

    Very thanks saved my time and energy!

  32. Manirathinam says:

    now header footer working but content overlabing what can i do

Leave a Reply