Print Styles? Inspect Element, duh!

Print Styles? Inspect Element, duh!

Written on: 01/12/2016

Did you know you could emulate print styles using Inspect Element? No? Me either!

The other day I was working on a client site and we had to do some pretty specific print stylesheets. Now I haven’t done anything with a print.css file in years, but it turns out that sometimes it’s required.

So there I was. Code. Save. Print Preview. View. Make Notes. Code. Repeat.

Then, it hit me – a quick Google search let me know that I COULD use inspect element to show your site as if it were printed. A gift of a timesaver – I couldn’t believe it was that easy!

So, to do this – follow these steps:

For debugging print styles in Firefox open the Developer Toolbar and enter media emulate print in the input field at the bottom of the browser window and press enter. The active tab will act as if the media type was print until you close it or refresh the page.

In Chrome open DevTools and show the console drawer (Esc), open the rendering pane, check Emulate CSS Media and select Print.

Simple, eh?!

Let's work together on your project.

Have I made an impression?

If so, then why not take the next step, which is a totally free indicative quote calculator. My hand coded algorithm asks you a few simple questions, and then will be able to give you a ballpark figure that we can use as a jumping off point for your project. Get a free quote now