This chapter is from the book
This chapter is from the book
This chapter is from the book
CSS Printing Features
Style sheets offer you the ability to hide certain portions of a page. This, in turn, makes it easy to be more printer-friendly—especially in instances like WebReview.com, which uses dynamic, rather than fixed, tables.
Figure 3.5 Dynamic tables can pose a printing problem.
){kind=link}
The style sheet guide at WebReview.com—written by the World Wide Web Consortium (W3C) style sheet working group member Eric Meyer—uses the display property along with classes to ensure that certain parts of the page won't print.
Figure 3.6 Use the display property to hide some items for easier printing.
){kind=link}
To recreate this feature, follow these steps:
-
Open an existing HTML or XHTML document along with the print_style.css document found on the web site.
NOTE
For more information on class and grouping, see Chapter 1.
-
In the print_style.css document, note the class selectors for elements that are to be prevented from printing:
table.top-ads, table.bottom-ads, table.footer, td.left-nav *, td.right-ads *, p.style-nav {display: none;} -
Add the class attribute to the tags in question.
<td width="125" valign="top" align="right" class="right-ads">
Here's a sample from the Style Guide at WebReview.com:
-
Choose to embed or link externally to the file and enter the appropriate code.
<link href="printout.css" type="text/css" rel="stylesheet"
media="print"/>I choose to link externally, so I entered the following into the head portion of my HTML document:
CAUTION
The display property is not supported by any 4.0 versions or below of Netscape or Internet Explorer. In this case, you won't be able to print out the printer-friendly version of the page, but the page will print. The display property is supported by Internet Explorer 5.x and higher on Windows and Macintosh, and Netscape 6.x for Windows and Mac. It is also supported by Opera 4.x and 5.x, and many versions of Mozilla.