@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…

One

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.

Two

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.

Three

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.

Four

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.

Five

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 */
}

Six

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.

Seven

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.

Eight

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.

Nine

Addendum

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.

  Loading links to posts on similar topics...