Web Standards in Dreamweaver Part 3 - Media Descriptors
(Page 10 of 12 )
Media descriptors allow you to specify how a document is presented on different media: monitor screens, paper, screen readers, Braille readers, or other devices. For example, you can specify that one stylesheet is used if a page is being printed and another is used when it is displayed in the browser window. Amedia descriptor allows a stylesheet designed with speech synthesis rules to be served to screen readers and stylesheets designed with Web TV or PDAs in mind to be served appropriately.
Whether a browser or device understands the media descriptor varies between devices at present, but there is good support for print (the media descriptor you will currently find most useful). Learning to use this method of serving appropriate presentational rules should become more useful in the future as device support grows.
The media descriptors as listed in the CSS2 specification are shown in Table 2-2:
| Descriptor | Media |
| all | All devices |
| aural | Speech synthesizers |
| braille | Braille tactile feedback devices |
| embossed | Paged Braille printers |
| handheld | Handheld devices (small screen, monochrome, limited bandwidth). |
| print | Documents to be printed |
| projection | Projection devices |
| screen | Color computer screens—standard web browsers |
| tty | Media using a fixed-pitch character grid or portable devices with limited display capabilities. These are typically older mobile devices; most current devices would fall into the handheld category |
| tv | Television |
You can use media descriptors either by specifying a separate stylesheet for each type that you want to use or by using @ Import.
Specifying a Separate Stylesheet for Each Media Descriptor
If you already have a stylesheet linked to your page for presenting your document in a browser and you want to add a stylesheet that will only come into play when the document is printed, you can add a second linked stylesheet for print. You will also need to add the media descriptor screen to your existing stylesheet so that the browser knows to use the screen stylesheet in the browser and the print stylesheet when the page is printed.
<link rel="stylesheet" type="text/css" media="screen" href="screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Using a print stylesheet allows you to, for instance, hide navigation when a document is printed, change the font from a sans-serif typeface (which is more readable on screen) to a serif typeface (which is more readable in print), and remove a background color or images that would cause the printing to take longer.
Media Descriptors with Imported Stylesheets
The method just outlined means that you need to create a separate stylesheet for each browser. However, by using @ Import, you can specify certain elements within one stylesheet to apply to different types of media. To use the @ Import method, attach your stylesheet to the page.
<style type="text/css" media="all">@import "all.css";</style>
Within the all.css stylesheet, add attributes for each media descriptor by using @ media.
@media print {
body { font-size: 10pt; }
}
@media screen {
body { font-size: 12px; }
}
@media screen, print {
body { color: #000000; }
}
The declarations just shown give a font size of 10 points when the page is printed and 12 pixels when the page is viewed in a regular browser. Both screen and print will use #000000 (black) as the color of the body text.
 This chapter is from ASP.NET Web Development with Macromedia Dreamweaver MX 2004, by Costas Hadjisotiriou (Apress, 2004, ISBN: 1590593480). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Working with Dynamic Data >>
More Web Standards Articles
More By Apress Publishing
/ 4 
