Viewing Your Website in Print Mode when Creating Print Stylesheets

Print Stylesheet Option in Firefox
Author: Mark Conroy
Date:

Don't want to hit print, then save as PDF, then open the PDF viewer ... again and again and again?

Firefox

I'm a bit of a Firefox junkie, so let's go with that first. It's quite simple really:

  1. Open Firefox Developer Tools
  2. Click on the Print Icon (see image above)

That's it. Your site will now be rendered as it will look when printed.

Chrome

Chrome is quite easy as well, but not as easy as firefox.

  1. Open Chrome Developer Tools
  2. Click on the dev tools hamburger menu
  3. Select "More tools"
  4. Choose "Rendering"
  5. Scroll down the list to "Emulate CSS Media"
  6. Choose 'Print"

Safari

Anyone still using Safari?

Join the "Something nice ..." newsletter

The full title is "Something nice, something quirky, something else".

I send an email once a week with something nice, something quirky, and something else that I think is interesting (all with a web development theme, of course).

Tags