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

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove, that you are human! *