Printing stylesheets

I recently read Marko Dugonjić’s 10 Minutes to Printer Friendly Page (via CSS Vault), a quick tutorial on how to load a print CSS with server side scripting. The technique involves reloading the same page, but with an added variable to the query string. When that variable exists, a separate print stylesheet is loaded instead of the screen stylesheet.

What I usually do on client sites is very similar, but not quite the same. I also use server side scripting to check for a variable on the query string, but I don’t load a print stylesheet instead of the normal CSS file, which Marko does.

The way I do it, I always load the normal screen CSS. When the query string contains the printer-friendly variable, I also load an overriding print CSS. In the print CSS, I define rules that override those in the normal CSS that aren’t suitable for the print version. This includes setting display:none for stuff that should be hidden, changing font-size, font-family, margin, and anything else that needs to be changed to make just the content appear in a format suitable for printing.

There is no huge difference in doing it this way as far as I can tell, so it’s mostly a matter of preference which way you choose to define and load your print stylesheets.

Posted on September 23, 2004 in CSS