The Particle Lab

Easier print CSS coding using Firebug and Web Developer Toolbar

By Ben, 15 Mar 2010

Print stylesheets are an aspect of front-end engineering that rarely get any love, and they'll often be ignored until the last possible moment before launching a site. Sometimes they might even be forgotten altogether, but you should always make time to write at least a basic stylesheet that formats things neatly, and reveals any elements that only make sense on paper while hiding things like interactive controls that will be useless when printed.

But how to make the process of creating a print stylesheet as painless as possible? The obvious (and painful) way of working goes something like this:

  1. Open/refresh your site in a browser
  2. Pull up a Print Preview
  3. Make changes to your print CSS in your editor
  4. Close the Print Preview
  5. Go to 1

It's only going to take a few laborious cycles through that loop before you're ready to give up and work on something more rewarding.

But wait, there's a better way! By using Firefox with its two close friends; Firebug and Web Developer Toolbar (you're all using these daily for front-end engineering anyway, right?), we can make working on a print stylesheet as simple as one for the screen. Observe.

First, open your website in Firefox, then we'll ask Web Developer Toolbar to render the page using your print rather than screen CSS by choosing CSS → Display CSS By Media Type → Print from the Web Developer Toolbar:

Now what you'll see is your website rendered using your print media type CSS. We could just launch Firebug and start attacking the DOM and our styles at this point, but if you need to reload the page to pull in changes made to your code via your text editor, you'll have to choose to view the print CSS again.

Thankfully there's an option for that; Options → Persist Features, which will retain our CSS media type preference across page reloads:

Now we can start using Firebug to inspect our page and play with styling and markup as normal, and if you need to reload the page, you'll still be viewing the print CSS afterwards.

So now that you have no excuses for not producing sensible print CSS, go and give this a try and patch up your site. We still need to do ours — I'll get around to that some day.

The site you see in the background here is Eric Meyer's 2002 article on print stylesheets, which despite being 8 years old is still relevant today, and even made use of a CSS3 attribute selector for some super progressive enhancement before we even knew what that term was.

Photo of Ben Bodien, who wrote this blog post

Ben Bodien is Principal & Co-Founder at Neutron Creations, where he oversees product design and front-end development. For a somewhat balanced mixture of ranting and raving follow Ben Bodien on twitter.

comments powered by Disqus