Debugging CSS Print Stylesheets without Killing Trees

Working on a print stylesheet has been a pain for me to the point where I often don’t even add print styles even to things that ought to have them. Partially this is because it so rarely comes up (either the page is meant to be printed or not… why complicate things) but partially because debugging is such a pain!

However, while working on a page where the content was the same for what should be displayed on the screen and what’s printed, all I needed to do was hide the navigation I realized I needed a solution. Instead of making my changes and printing a new copy for every major change I needed a way to preview my print style in the browser. Then Google provided the answer: they linked to this StackOverflow page where user “danblaker” with the suggestion provided by “ZMorek” solved the problem.

All you have to do is make sure the “print” stylesheet is the last one in your HTML <head>, remove the “media=’print'” attribute from it and add the following to the top of your print stylesheet to set the appropriate size for the document:

width: 8.5in;

After that, you can see the results of applying the print stylesheet in your browser! You’ll still need to print at least once to make sure everything looks the same in the browser as on the page, but this saved at least a dozen sheets of paper and probably a half-hour of my time.

Remember that if you’re doing this on a production site all visitors will see the results of the print stylesheet so watch out!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.