Disable Print Stylesheets (CSS) When Printing a Website

I recently needed to get a snapshot of a website exactly as it is shown on my screen. That is, I wanted the background color, I wanted the ads, I wanted the full layout.

One option is to take sequential screenshots as you scroll down the page, then piece them back together in Photoshop. This is time consuming and leaves you with a low-resolution (72dpi) image.

Another way to do this is to Print the page, then "save as" a PDF instead of actually printing. This works quite well for pages that do not define a different layout for printing a page versus viewing the page.

Unfortunately for me, it has become increasingly popular to include a "print" stylesheet on a website, which defines new page styles when a user tries to print the website. This is defined in the header and looks something like this:

  <link type="text/css" rel="stylesheet" media="print" href="/css/print.css" />

I have found only one option that truly addresses my needs: The "Web Developer" add-on / extension developed by Chris Pederick.

With this plugin you can very easily disable ALL styles, Default styles, inline styles, embedded styles, and, you guessed it, print styles!

It is currently available for Firefox and Chrome. I truly hope a Safari extension will come some day, as I primarily use Safari. The only option I have found for Safari is to disable ALL styles - a feature that comes by default with the newest version (5.0.3) of the browser. This is useful during development to see how your site will be viewed on a text-only browser but without the ability to select which styles you're disabling it has limited utility.

Hope that helps!