Yep.
Let’s take a look at how to do it in different browsers. Although note the date of this blog post. This stuff tends to change over time, so if anything here is wrong, let us know and we can update it.
In Firefox…
It’s a little button in DevTools. So easy!
- Open DevTools (Command+Option+i)
- Go to the “Inspector” tab
- Click the little page icon
In Chrome and Edge…
It’s a little weirder, I think, but it’s still a fairly easy thing to do in DevTools.
- Open DevTools (Command+Option+i)
- If you don’t have the weird-special-bottom-area-thing, press the Escape key
- Click the menu icon to choose tabs to open
- Select the “Rendering” tab
- Scroll to bottom of the “Rendering” tab options
- Choose print from the options for Emulate CSS media
In Safari…
Safari has a little button a lot like Firefox, but it looks different.
- Open DevTools (Command+Option+i)
- Go to the “Inspector” tab
- Click the little page icon
In Safari 12.1.2 (on macOS 10.14.6/Mojave), you’d go to DevTools (Web Inspector) and then to the “Elements” pane/tab and look for the “Printer” icon (top right)
Couple years ago I used this feature heavily within in Chrome to emulate print styles. I can say that this does not translate correctly when printing. It’s been some time now since I have had to do any print styles, but in my experience you still had to do a print to make sure it is correct.
The issues I ran in were mostly image, copy, and spacing related. Not sure if print emulation was picking up media queries that are generally ignored when printing. And thus giving me a different experience in print emulation vs print.
All that said, the print emulation is still nice to get an idea of what it may look like.
At least Chrome has a before-print preview of the document with (media: print) styles applied
I got rid of indesign lately and just make my templates with html and css to export a printable pdf from browsers now. It saves 30$ going to Adobe and is kind of a geeky cssbattle for myself. (contenteditable and document.execCommand gives me nice editor features right in the browser, so html replace my indd files from now on)
But: internet explorer is still an annoying little asshole (am I allowed to say that here?), when it comes to pdf export with the browser module. Is there a trick to hide the date and url when writing to pdf with IE?
Much easier to use the command palette in Chromium:
Open DevTools
Press
cmd+shift+pSearch for “Emulate CSS print media type”
Click on or press
enteron the itemTo undo, just search for “Do not emulate CSS media type”
Sadly, without the ability to constrain the viewport to a fixed size, I still need to rely on hitting cmd-p and looking at the preview, to see where breaks happen.
We build a web app that produces invoices, quotes and forms, and our customers need to print, or at least PDF, these. It’s a lot of extra time to continually hit preview. I’d love a browser (or Chrome specifically) which would just keep that preview open on my screen and live refresh when I save my CSS, like the other pages do.