Quick Tip: Optimize Your print.css with Print Emulation

Reach Printemulation – Chrome/Chromium

• First open chrome developer tools via Ctrl + Shift + I.
• Drag the bar to the bottom and select the tab emulation.
• Check the checkbox “CSS media” and select print in the dropdown-menu
• You should now see the print preview for the page.

Tips for your print.css

• Most important is to hide everything you don’t want to print with display:none;.
• Unnecessarily big margins don’t fare well (waste of paper!). Remove them with margin:0; and padding:0;.
• For older browser it is recommendable to remove background images and colors. A quick and (very) dirty solution would be: *{background:none}.
• To print links you can add a:after{content:" (" attr(href) ") "} to your print css. IE ignores this though, alternative would be JScript.
• To specify page orientation add the following: @page{size: A4 portrait|landscape}.
• Theoretically speaking, it would be faster to combine CSS into a single file to avoid redundant HTTP-Requests. You could combine styles.css and print.css making use of media queries: @media only screen{...} and @media print