Posted By

paul66 on 01/27/11


Tagged

css print stylesheet


Versions (?)

Print styles


 / Published in: CSS
 

URL: www.phpied.com/delay-loading-your-print-css/

Any decent site should be print ready, as even though we live in a technology driven time, people still like to have a hard copy of some information. This snippet firstly uses a css media declaration, allowing you to include this in your main stylesheet, and not having to place another link in the head of your document. This benefits load time, as even when the page inst being printed, a browser will always download that extra css file, generating an extra http request. The snippet then goes on to include some useful print styles such as printing our link urls, and so on.

  1. /*
  2. * print styles
  3. * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
  4. */
  5. @media print {
  6. * { background: transparent !important; color: #444 !important; text-shadow: none; }
  7. a, a:visited { color: #444 !important; text-decoration: underline; }
  8. a:after { content: " (" attr(href) ")"; }
  9. abbr:after { content: " (" attr(title) ")"; }
  10. .ir a:after { content: ""; } /* Don't show links for images */
  11. pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  12. img { page-break-inside: avoid; }
  13. @page { margin: 0.5cm; }
  14. p, h2, h3 { orphans: 3; widows: 3; }
  15. h2, h3{ page-break-after: avoid; }
  16. }

Report this snippet  

You need to login to post a comment.