Easier print CSS coding using Firebug and Web Developer Toolbar

Written by Ben on 15.03.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:

Open/refresh your site in a browser
Pull up a Print Preview
Make changes to your print CSS in your editor
Close the Print Preview
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.

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 him on Twitter: @bbodien.

43 Responses

Alex

March 16th 2010 @ 9:57 am #

Thanks a bunch for the tip Ben, it’s already come in handy!
Yaili

March 16th 2010 @ 11:29 am #

Oh my, “Persist features”, heh? Why didn’t I know about that life-saver before? :)

Very useful tips here, Ben, thank you!
Matt Bee

March 16th 2010 @ 11:57 am #

Ditto Yaili! Why didn’t anyone tell me about “Persist features” before!

Thank you so much, think you have just saved my sanity, not to mention made the inevitable print stylesheet authoring a much more enjoyable process!

“Persist features”, well I never.
Frank Stallone

March 16th 2010 @ 11:57 am #

I am with Yaili on this one, I did not know about the Persist Features and that alone made this article well worth the read. Keep em’ short and informative!
Simon Davies

March 16th 2010 @ 11:58 am #

What an amazing tip! Shame I have just finished styling a Print Style Sheet, have to remember it for next time!
Ian

March 16th 2010 @ 12:00 pm #

I had no idea what ‘Persist features’ was there for. Now I know. Eternally useful, thanks.
Ben Everard

March 16th 2010 @ 12:03 pm #

Awesome, been using the two plugins for Firefox for donkeys years now and my tiny brain hadn’t even seen that feature.

Cheers!
Wayde Christie

March 16th 2010 @ 12:08 pm #

These are the kind of tips I love. Thanks for the post!
Ben

March 16th 2010 @ 12:22 pm #

Thanks everyone!

I’m glad I wasn’t the only one who didn’t know about that feature of WDT until recently then.
Hillary H.

March 16th 2010 @ 12:25 pm #

That is SO neat! I never knew. Thank you so much for this post. Short and sweet, it’s how every blog should be!
Jens Grochtdreis

March 16th 2010 @ 12:34 pm #

The idea is really good. I never looked for both options in WDT. Since the rise of Firebug I rarely use the WDT. But your trick does it only with linked Stylesheets, I guess. I use the framework YAML which imports several CSS-files and works with @media-rules. As you can easily see on my page there are huge differences between the real print and the mimicked one. But for all the rest of the pages your trick is really a timesaver. Unfortunately I must look for another trick (or write Chris Pedrick).
Easier print CSS coding using Firebug and Web Developer Toolbar « Neutron Creations « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

March 16th 2010 @ 12:40 pm #

[...] Easier print CSS coding using Firebug and Web Developer Toolbar « Neutron Creationsneutroncreations.com [...]
Brent Mitchell

March 16th 2010 @ 12:49 pm #

Bravo! This will make the dull job of print styles sheets a bit easier. I really should explore Web Developer toolbar some more. I never noticed the Persists Features option. I wonder what else is in there that I could use?
Ben

March 16th 2010 @ 12:50 pm #

@Jens

One thing you might try is adding a query string parameter (eg: ?cssprint=true), and use that in a condition (if possible) to serve your print css as media=”screen” instead? It’s a crazy plan, but it might just work if WDT isn’t doing it for you.
=== popurls.com === popular today

March 16th 2010 @ 1:00 pm #

=== popurls.com === popular today…

yeah! this story has entered the popular today section on popurls.com…
Warren

March 16th 2010 @ 1:57 pm #

Great article Ben. Short, sweet, and full of great new tricks. The ‘persist feature’ is golden. Cheers
Ryan

March 16th 2010 @ 2:20 pm #

Nice article. I have the WebDev toolbar, but haven’t ever used that CSS-swapping function… looks really helpful.
Easier print CSS coding using Firebug and Web Developer Toolbar « Neutron Creations » Web Design

March 16th 2010 @ 2:28 pm #

[...] Easier print CSS coding using Firebug and Web Developer Toolbar « Neutron Creations [...]
Rob

March 16th 2010 @ 2:54 pm #

I think I love you.
Gabriel Izaias

March 16th 2010 @ 3:54 pm #

Quite a good article you have here. Nice tips.

The “Persist Features” will help me a lot.
Steve Hurst

March 16th 2010 @ 5:53 pm #

While this is a good approach for getting your print style sheet most of the way there, it doesn’t account for weird element rendering that can occur in the print engine of the browser. Often I’ll run into an element causing a page break, or hiding whole swaths of content, while attempting to make anything more than a single column print layout. Not to mention how IE or other browsers might parse the site for print. It’s a good idea to run your site through the normal print engine of the top browsers to make sure you’ve covered everything when you’re done.
Ben

March 16th 2010 @ 8:05 pm #

@Steve

Absolutely, and a great point.

This is just a technique to help you through the bulk of the work involved in producing your print styles. It’s not a replacement for final cross browser testing with actual print previews just to make sure. I’d even recommend you print a page out just to pick up on any details that might get lost in translation.
Russell Heimlich

March 16th 2010 @ 8:46 pm #

It’s worth noting that you need to set your media attribute correctly or the Web Developer toolbar gets a bit wonky.
Geoff Cowan

March 17th 2010 @ 11:48 am #

Cracking post, not sure how I could of missed the “persist” button.
Hian Battiston

March 17th 2010 @ 12:02 pm #

Really cool Ben! Thanks!
Robert W.

March 17th 2010 @ 2:55 pm #

Do people really print out web pages???
Can`t remember when I ever printed out a web page.
Ben

March 17th 2010 @ 3:06 pm #

@Robert how about for ticket reservation, where you need to print out a page with your booking confirmation to use as proof of purchase for ticket collection? There are a (diminishing, admittedly) number of situations where it’s helpful to print off webpages.
Steve Hurst

March 17th 2010 @ 5:27 pm #

@Robert It could also be used to Print to PDF, to pass an article or post along to someone else or save for later. I’ve seen users do crazy stuff, you never know.
punkymunky

March 17th 2010 @ 6:25 pm #

Great timing, I totally have to make a print CSS today!
Aaron Whitman

March 17th 2010 @ 6:30 pm #

Thanks Ben, nice solution!

I “switched” from Web Developer Toolbar to FireBug a while back, and never considered using them together until now. Now I’m going to re-install WDT.
Ben

March 17th 2010 @ 8:47 pm #

@Aaron Thanks! I also stopped using WDT’s inspection features when Firebug first came out, but I still use it for this feature described here, and also disabling javascript, images and so on for degradation testing.

It also has a handy “Disable cache” feature to work around overly aggressive caching behaviour in something you’re working on. Always remember to switch that one off again when you’re done, since that feature will always persists across not only reloads, but also tabs and new windows!
Trisha Cupra

March 18th 2010 @ 2:28 am #

Oh, cool. I knew about Display CSS By Media Type → Print and I remember seeing the Persist Features, but I hadn’t put two and two together in my mind yet. Your post came just in time before I started working on a new print.css!
Konrad Kierys

March 18th 2010 @ 7:28 pm #

Thanks for this tip with Options → Persist Features :)
This Week’s Favourites – April 2nd 2010

April 2nd 2010 @ 9:01 am #

[...] The Particle Lab [...]
This Week’s Favourites – April 2nd 2010 - Programming Blog

April 2nd 2010 @ 11:42 am #

[...] The Particle Lab [...]
michael haskell

May 17th 2010 @ 7:20 pm #

Great tip.

However… I am experiencing a slight differences in the webdev css vs. print preview. Everything in the print preview display is ~125% larger. (images, text, etc…)

Any ideas, anyone seen this? FF 3.5 SnowLeopard, duplicates in chrome as well w/o webdeveloper that is.

Thanks Again.
Steve Johnson

June 8th 2010 @ 10:09 pm #

Thanks for taking the time to publish this, it’s a really handy tip.
Paweł

July 29th 2010 @ 1:17 am #

Cool, thanks!
TOPGFX » Blog Archive » Firebug : The Key to Successful Web Development

September 4th 2010 @ 7:01 pm #

[...] Easier print CSS coding using Firebug and Web Developer Toolbar [...]
Craig

September 24th 2010 @ 9:53 am #

This is very useful. I did run into a few problems with printing Firefox and the Web Developer tool bar didn’t help though. One mistake I made was of having height: 0; in my body selector. In IE6 the print preview was fine (IE interprets height as minimum height rather than maximum height) but nothing appeared in the Firefox print preview. I removed this then found that the print preview in Firefox only had a single page. This was due to an overflow: scroll; in my body selector.
Johan

November 28th 2010 @ 12:51 pm #

Check out my contribution to this problem at cssupdater.com, it’s still in beta but I use it for my everyday work at the moment.

It consists of a Firefox plugin which talks to the desktop application through a socket server, in the application you specify which css files you want to LIVE sync with your FireBug css changes.

So basically, all you need to do is to tweak and pixel push until satisfied. And then reload your site and smile since your changes is persistent! ( your css source files have been edited and saved with the application )
César

February 21st 2011 @ 7:10 pm #

Exelente tip!! Buenisimo! :)
Kaush

February 23rd 2011 @ 3:20 am #

Just had to work on a print stylesheet and thought to myself..”hmm wonder if the web dev toolbar will help me do this quicker and easier..”

A few keystrokes in Google and boom here it is. Thanks a bunch. Right to the point!