Advertisement
Promo

Application development Toolkit

Try CSS media types to build printer-friendly pages

Shawn Morton Builder.com

Published: 23 Jun 2003 14:38 BST

  • Email
  • Trackback
  • Clip Link
  • Print friendly
  • Post Comment

As a reader of this or any other media Web site, you are undoubtedly familiar with the printer-friendly page. It is a version of an article that is free of most graphics, background colors, and advertisements. In most cases, the printer-friendly page is a separate file that requires a trip to the Web server to retrieve.

I'm going to share an example that demonstrates how to use Cascading Style Sheets (CSS) media types to format a single HTML file for both the screen and a printer.

Media types explained
The @media rule in CSS allows me to assign specific styles based on the type of device the page will be displayed on. There is no need to create separate HTML files for each device, only separate @media rules within a single CSS file. There is also no need to make a separate request from the Web server, since the switch between media types is done on the client side.

Some of the supported devices under CSS include computer screens, printers, televisions, handhelds, speech synthesisers, and Braille tactile feedback devices. Currently, however, the major browsers support only a small number of the available media types. Internet Explorer 4.5+ and Netscape 4.7+ support screen and print, while Opera 3.67+ supports screen, print, and projector.

The HTML file
The first step is to open an existing HTML page. Figure A shows a screenshot of the printer-unfriendly page I will use in this example. Listing A provides the code. Notice that the style information is presented inline for the sake of demonstration.

Figure A

Next

Previous

1 2


  • Email
  • Trackback
  • Clip Link
  • Print friendlyPrint with EPSON

Did you find this article useful?
118 out of 234 people found this useful


Full Talkback thread

0 comments

Company/Topic Alerts

Create a new alert from the list below:





Video icon

Video

Discussions

CA CA

Copyright in a new light

Friday 18 December 2009, 3:54 AM

2 comments
CA CA

Inventions and Product Design

Friday 18 December 2009, 3:35 AM

1 comment
CA CA

I'm surprised...

Friday 18 December 2009, 2:13 AM

1 comment

Featured Talkback

In association with Network Liberation Movement
The fact is: Software developers today are really designers and not coders. The reason that business anlaysts exist today to model solutions is because they understand the value of designing software before writing it. All too often developers create code that has little value because they do not understand that business classes interact with other classes within the confines of a working model or pattern.

By: 1000165269

Read full story:
Making sense of agile modelling


Skip Sub Navigation Links to CNET Brand Links

Help

Become part of the ZDNet community.

Newsletters