CSS Cookbook

Chapter 8. Print

Introduction

If you were to try to print out a web page exactly as it appears on your screen, chances are you would end up wasting a lot of ink and paper printing unnecessary page elements, or worse yet, the content you printed would be illegible.

That’s why links to “printer-friendly” versions of web pages are all over the Internet, especially on news and business sites. When you click this kind of link, you are given a web page design or shell that contains the same text as what you see on your screen, but in a minimal version that is, well, friendlier (or easier) to print.

To create this printer-friendly version of the text, you traditionally would either have to manually convert the web page content to a new, stripped-down page, or use a script dynamically to generate a separate page design. With CSS, however, you can “automagically” redesign documents when they are printed, thereby eliminating the need to code a separate, printer-friendly version as well as saving on server resources typically required to generate the page.

Support for print-media CSS is fairly commonplace these days. Currently, the browsers that support this aspect of the technology include Internet Explorer 4+ for Windows, Internet Explorer 4.5+ for Macintosh, Navigator 6+, Safari, and Opera.

There are print-only properties associated with CSS. However, these properties have limited support among the browsers on the market; Opera 5 and 7 are the only browsers that support more than two of these ...