Faster way to develop and test print stylesheets (avoid print preview every time)?
CssFirefoxCss Problem Overview
This is my process right now:
- Save changes to print.css
- Open browser and refresh page.
- Right-click and choose Print > Print Preview (Firefox, but any browser really)
It's step 3 that bugs me and I'm wondering if it's possible to cut it out of the process with a plugin or something. Just choose to view a page as print media, and then simply refresh to see the changes.
How do you test your print stylesheets? Do you always click print preview after a refresh?
Css Solutions
Solution 1 - Css
You can use the Chrome Media Type Emulation as accepted in the post See print css in the browser.
UPDATE 21/11/2017
The updated DevTools doc can be found here: View a page in print mode.
> To view a page in print mode:
> 1. Open the Command Menu. (tl;dr Cmd+Shift+P (Mac) or Ctrl+Shift+P (Windows, Linux))
> 2. Start typing Rendering and select Show Rendering.
> 3. For the Emulate CSS Media dropdown, select print.
UPDATE 29/02/2016
The DevTools docs have moved and the above link provides inaccurate information. The updated docs regarding Media type emulation can be found here: Preview styles for more media types.
> Open the DevTools emulation drawer by clicking the More overrides ••• more overrides icon in the top right corner of the browser viewport. Then, select Media in the emulation drawer.
UPDATE 12/04/2016
Unfortunately, it seems the docs have not been updated in regards to print emulation. However, the Print Media Emulator has moved (again):
- Open Chrome DevTools
- Hit esc on your keyboard
- Click ⋮ (vertical ellipsis)
- Choose Rendering
- Tick Emulate print media
See screenshot below:
UPDATE 28/06/2016
Google Developers Docs around Chrome DevTools and the "Emulate Media" option have been updated for Chrome >51:
https://developers.google.com/web/tools/chrome-devtools/settings?hl=en#emulate-print-media
>To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering Settings, and then enable the emulate media checkbox with the dropdown menu set to print.
UPDATE 24/05/2016
The naming of settings have changed once again:
>To view a page in print preview mode, open the DevTools main menu, select More Tools > Rendering, and then enable the Emulate CSS Media checkbox with the dropdown menu set to print.
Solution 2 - Css
In Firefox you can type Shift+F2 to open a Developer Toolbar command line, and then type media emulate print
You can also emulate other media types this way.
Solution 3 - Css
Firefox + Web Developer toolbar extension has a way to enable/disable various stylesheets.
Look under the CSS menu. There is a menu to disable and enable individual stylesheets and a "Display by media type" menu as well.
Also, to just reduce the steps to get to PrintPreview in Firefox, try the PrintPreview extension, that will create a toolbar button.
For Chrome, there is a port of that extension. From what I can tell with the Chrome version, you can choose "Show print styles"
Solution 4 - Css
I wouldn't use any testing method that doesn't involve print preview. There are too many differences: background images not working at all in print, but showing up in normal screen contexts being chief among them.
In Chrome, control+p goes immediately to print preview. (Just forget mousing up to your menu bar). That's pretty easy.
Solution 5 - Css
You could simply disable your screen styles and change your media type to "screen" for your print stylesheet while testing. This will not be exactly the same as using a real print preview (page breaks, document width, etc.), but it still gives you a pretty good idea.
Solution 6 - Css
simple for me (not having @screen parts or similar1) with FF:
- put the
@media print { ...part at the end of your CSS content - out-comment only the wrapper declaration
/*@media print {*/ ... /*}*/- thus applying the print stuff to your styles immediately overriding them where applicable
- (I am using LiveReload thus my browser page refreshes immediately after saving changes)
- (otherwise, if not using LiveReload:) press
CTRL+Rto reload the page - now you already can do a lot of typical print CSS adjustments (font style, font size, spacings, colors) where one does not need the print preview yet
- press
ALT+F+Vto open print preview andALT+Wto close it again
1: if one has them, out-/in-commenting those, depending on your tested media, may not be a big deal otherwise
Solution 7 - Css
As described in this other post (https://stackoverflow.com/questions/9540990/using-chromes-element-inspector-in-print-preview-mode), you can use chrome to simply emulate the print stylesheet. This is great as you can use the inspector to see where the styles are coming from rather than guess when you see the print dialog come up.
Access the Overrides Settings dialog by clicking the gear icon in the bottom right hand corner of Chrome's Element Inspector. Then select print as the target media type.
Awesome!
Solution 8 - Css
At least in Chrome: During development, add to the body tag onload="window.print()". This will cause the print mode to open immediately after you refresh.
Unfortunately it doesn't seem like the developer tools are much use since it's essentially an embedded PDF.
Incidentally there are ways to eliminate step 2. One popular one is LiveReload.
Solution 9 - Css
You could try temporarily removing your regular stylesheet, and only loading in the print one with a normal link tag.
Solution 10 - Css
In Chrome 62, cmd-R/cmd-P works well on a Mac to bring up a nice preview of a @media print styled page.
This is accessible through the vertical elipsis in the upper right of the browser window itself (not Developer Tools) / Print...
Use esc to cancel the preview window.
So, for my workflow with IntelliJ IDEA and Chrome, it's: cmd-s, cmd-tab, cmd-r, cmd-p, esc, cmd-tab and I'm back in the IDE.
Chrome 62 in Windows 10 has the same Print... menu in the same place, accessible with ctrl-p:
