Web Design in a Nutshell, 2nd Edition

Cascading Style Sheets for Printouts

A more sophisticated way to control the way your page looks when it is printed is to take advantage of media-specific style sheets. This feature in the CSS2 specification allows a single document to be formatted on the fly depending on the device displaying or outputting it. When it’s on the screen, it looks one way; when it prints out, its format changes to be read clearly on hard copy. That eliminates the need to create a separate printer-friendly version of every page on your site. See Chapter 17 for background information on how style sheets work.

The process involves creating two style sheets: one appropriate to screen display and one appropriate for print. Both style sheets are associated with the HTML document using the media attribute or the @media rule. When the browser sends the page to print, the appropriate style sheet is chosen for the job. A more detailed explanation follows.

The downside to using any feature from the CSS2 specification is poor browser support. As of this writing, the media attribute is supported on Internet Explorer 5.0 and higher on Windows and IE 4.5 and higher on the Macintosh (IE does not support the @media rule). Navigator began supporting media types in Version 6 for both platforms. Because of the spotty browser support, you can’t rely on these techniques for 100% of your audience, but if you know that your users are up-to-date with their browser downloads (such as in an intranet environment), you can begin ...