Using a different CSS stylesheet for printing (<link> vs. @media)

One of the advantages of the new tableless layout at microhowto.info is that it is now significantly easier to remove unnecessary elements from the page when it is printed. I think this looks better, and it certainly saves paper compared to the alternative of printing everything.

This is something I has previously implemented on codepolice.org using an HTML link element, but since traffic to the MicroHOWTO site is higher by a factor of 50 I wanted to check whether this is actually the best method.

It turns out that in terms of efficiency it probably isn’t, especially when the number of print-specific rules is small. Zoompf have a good explanation of the issues on their website (Browser Performance Problem with CSS "print" Media Type). In short, most if not all current web browsers download any print-specific CSS rules whether or not they are needed immediately, so placing them in a separate stylesheet merely increases the number of HTTP requests needed.

I didn’t like the idea of using JavaScript to load the rules because I strongly believe that users should be able to turn off scripting without penalty unless there is a compelling reason why it is needed. In this case the consequences are not too serious, but it still qualifies as an unnecessary and easily avoidable reliance on JavaScript.

I’ve written up three of the other possible methods — @media, <link> and @import — as a microHOWTO (Hide part of an HTML or XHTML document when it is printed), with some notes about their pros and cons. Both microhowto.info and codepolice.org have been altered to use single stylesheets with @media rules.

User login