For most browsers, it is not easy to see the impact of stylesheet changes on print media. To preview CSS for an ordinary browser rendering of a webpage, you have to:
- Make the CSS change.
- Switch windows.
- Refresh the page.
For print, it's a little more involved:
- Make the CSS change.
- Switch windows.
- Refresh the page.
- Invoke Print (click or keyboard shortcut)
- Open PDF in Preview
- View PDF
It turns out you can preview print stylesheets directly in the browser on Chrome! The basic functionality has been present for a while, but Google occasionally changes how you access this feature. These instructions work as of Chrome v. 43.
Here's how:
1) Open the Chrome Inspector (keyboard shortcut or right-click on webpage)
2) Click the cell-phone icon on the Inspector menu:
3) The page loads inside the device emulation environment. Click the console icon on the inspector menu bar:
4) Click on the emulation tab, choose CSS media, and select print:
5) You may need to refresh the page, depending on how you load your print CSS.
That's it. Now Chrome is displaying how web pages look rendering with print CSS. It is not simulating page breaks, and it may not perfectly represent what you'll get when you print. But for seeing which elements get rendering, with what fonts, and approximate spacing, it will save you time and keystrokes.