@media queries and face palms

This is a story with many moving parts. It ends with a complete and utter face palm, so stay tuned…


Our inkjet printer has been having paper feed problems for a while. Send something to the printer, it either doesn’t feed at all or feeds 3 or 4 sheets at once. Plus it was starting to not print in the leftmost inch, inch-and-a-half of the page. Time for a new one. I unpacked it and installed it this lunchtime. Nice and quiet and works perfectly.


Until a couple of hours ago, this site used to have the following tags to load the CSS:

<link rel="stylesheet" href="/blog/files/themes/basic/css/style.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/blog/files/themes/basic/css/print.min.css" type="text/css" media="print" />

In other words, back in the mists of time I wrote a special CSS file for printing the pages on this site.


To test my new printer, I printed a page from this site. It looked terrible. Absolutely terrible. Wrong fonts, things printed that should have been hidden, etc, etc.


It turns out that when I changed the theme of the site last time (or even the time before that), I hadn’t even looked at print.min.css, let alone fix it for the new theme’s classes and ids and basic HTML structure. No wonder it looked terrible. OK, I don’t print my site’s pages all that often, if at all, but even so.


Time to get rid of that CSS file altogether, remove that second link tag, and use an @media print block in my main style.min.css file instead. In essence, a new bunch of styles to be used while printing that hid the interactive parts of the web pages.

@media print {
    header nav {display: none;}
    .homePageView {display: none;}
    /* etc etc etc */


I updated the site, did a print preview and … virtually no change. The print was suddenly using a default set of styles (which was weird), but certainly all those to-be-hidden bits were anything but.


Time for StackOverflow. Add !important to your new styles said one answer. Did that: no change. Add the keyword only before print said another. Did that: no change. I tried a few other things, more in desperation than anything, knowing I could rationalize it once I found something that worked.


And then, through a link to another page to a blog post, I found the answer. Go back, dear reader, to that first link tag. See it now? The media attribute states unequivocally screen. The CSS is to be used only for the screen, no matter what it contains. The attribute should instead be all, to include a printer.




I did learn something really good though: Firefox’ Developer Tools allows you to emulate the print media type when displaying the page, so that you can use the tools interactively to debug the CSS as if you were printing the page. THIS IS AWESOME.

Album cover for The ManNow playing:
Costello, Elvis - Everyday I Write The Book
(from The Man)

lead type

Loading similar posts...   Loading links to posts on similar topics...

No Responses

Feel free to add a comment...

Leave a response

Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.

  •  Emphasize with italics: surround word with underscores _emphasis_
  •  Emphasize strongly: surround word with double-asterisks **strong**
  •  Link: surround text with square brackets, url with parentheses [text](url)
  •  Inline code: surround text with backticks `IEnumerable`
  •  Unordered list: start each line with an asterisk, space * an item
  •  Ordered list: start each line with a digit, period, space 1. an item
  •  Insert code block: start each line with four spaces
  •  Insert blockquote: start each line with right-angle-bracket, space > Now is the time...
Preview of response