They’re an often neglected part of a website but print stylesheets still sometimes need to be created for pages you know will be printed by users but checking them in your browser was always a pain. No more.
This is a repost of an article I’ve written for the work blog at Offroadcode.com but I felt it might be useful for readers here too.
A lot of websites these days don’t even bother with a print stylesheet but we’re working on an estate agency website using our AgenCMS system and we know that property sites are one area where users will print out property specifics to take with them or look at later so well formatted print pages are a must.
However, I’ve always found testing print stylesheets a pain because you have to make a tweak, refresh your page in browser and then hit print preview to see the change.
Print preview without print preview
Once you’re in print preview, (in Firefox at least) you can’t hit refresh to see any subsequent changes.
After tweeting a question to my Twitter followers @jimmoran suggested changing the CSS media type from “print” to “screen” but this on its own doesn’t work because you’re still seeing the other screen styles.
Why had I never thought of this?
I can’t believe I’d never thought of it before but I found commenting out the screen stylesheets in your page head and then changing the print stylesheet media type from print to screen gives you a pretty accurate representation of what your printed page will look like as it’s just rendering out your HTML and the basic styles you want for print.
You can then cut out the whole pain in the backside step of refreshing then using print preview.
Once you’ve done this, you can make use of refreshing in browser and in Firefox, you can also make tweaks inline with Firebug.