CSS-XML-XHTML | provides a printer-friendly web page for visitors

If you are willing to discard the browser of the old version and assume that your user is using a browser that supports css2 (for example, ie5 or later or Netscape 6 or later), you can use the newAllMedia descriptor to greatly simplify CSS code.

The following is an example of link using css2 media descriptor:

<LINK rel = "stylesheet" type = "text/CSS" Media = "all" href = "mysite-all.css"/>

<LINK rel = "stylesheet" type = "text/CSS" Media = "print" href = "mysite-print2.css"

/>

These links are almost identical to the previous one. The difference is that CSS files contain styles used to print media.

CSS files are the sameMedia = "all"The associated style can be applied to screen display, printing, and all other media, so you can put all created styles in this file. SameMedia = "print"The CSS files associated with each other can be much smaller, because the pages inherit all styles from all media files, so there is no need to copy and print these styles in the media files.

The only style required to print a media CSS file is those that change or add a page style to print the output. In general, this is just a style that prohibits the display of Div containing graphics and navigation content, and replaces the subject label and the width and white space settings of the main Div with the settings suitable for printing and output.

This technique works because all media CSS files and printed media CSS files are combined into the same cascading style rules. Therefore, the link sequence of these CSS files is very important. All media file links must be placed before the media file links are printed.

The following are some tips for Printing Media CSS files:

• To disable the display of a DIV, use display: None instead of visibility: hidden.
• Neither point (PT) nor inch (in) is the correct measurement unit for screen display, but they are the correct measurement units for print output.
• The Selector Used in printed media files must be exactly the same as that used in all media files. For example, if you use Div # sidenav to select the DIV whose ID is sidenav in all media files, # sidenav in the printed media file may not be able to achieve your goal.
• Do not forget to explicitly force a rule statement that will change from one file to another. For example, if you set padding for an element in all media files and want to remove this padding from the print output, adding a style that ignores the padding declaration to the printed media file is not enough-you must explicitly set the padding: 0pt to replace the previous settings.
• If you are using a graphic editor such as Dreamweaver, You can preview the screen effects of the generated page, rather than print the output results. To preview the Print Style in the design window of Dreamweaver, you must change the link to the printed media CSS file to media = "screen ". This allows you to preview and print CSS styles in a media file. Do not forget to change the media descriptor back to media = "print" before publishing your page ".

When you need to provide a printer-friendly web page for your visitors, you no longer need to create a separate version for the original page. Add a pairMedia = "print"The link to the CSS style table of the media descriptor can convert any XHTML/CSS page into a printer-friendly page.

Author: Michael meadhra was engaged in development in this field at the initial stage of web development. He has published dozens of books, including the upcoming release of "how to do everything with Dreamweaver MX 2004" (how to do everything with Dreamweaver MX 2004) by Osborne/McGraw-Hill).