Published: Mon 16 Sep 2019

Viewing Your Website in Print Mode when Creating Print Stylesheets

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

Print Stylesheet Option in Firefox

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?

If you like what I write, you might like to follow me on Twitter @markconroy

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.