Dr. Dobb's | Defining CSS Media Types

Defining CSS Media Types

January 01, 2002
URL:http://drdobbs.com/defining-css-media-types/184411838

WebReview.com: December 1, 2000: Columns: Tag of the Week: Defining CSS Media Types

In the beginning, HTML was intended to be a "media-free" document markup language. The idea was that authors would create documents with appropriate markup, and the browser would interpret the markup in ways that best suited the target media. Documents might display in a graphical browser one way, be printed in another, and be displayed on a line-based device in yet another. Needless to say, this naive view of the world has long since disappeared.

Media Types

It is now recognized that HTML documents will be rendered on a variety of media, that those media may be very different, and that the document should present well in every possible media. Since authors are disinclined to let the browser decide what constitutes "present well" for a given media, the CSS style sheet model has been extended to let authors define styles for each type of media. This lets authors craft very specific styles for all those different media types, guaranteeing that each method of presenting the document is exactly what the author intended.

Within CSS2, you can use the @media rule to define which style rules are applied for each media type. The general syntax of this rule is:

     @media types {
        style rules
        }

You should replace types with a comma-separated list of media types. When the document is processed by the browser, the associated style rules will only be used if the document is being rendered for one of the specified media types.

You cannot specify just any media type. Instead, CSS2 defines a specific set of media types that all conforming browsers are expected to understand. These types include:

all: This media type indicates that the included style rules are suitable for all devices.
aural: The document is being "rendered" by a speech synthesizer or similar audio device.
braille: The document is being presented on a braille tactile feedback device.
embossed: The document is being printed on a braille printer.
handheld: The document is being rendered on a handheld device, with presumably limited display capabilities and bandwidth.
print: The document is being rendered by a printer.
projection: The document is intended for some form of projected presentation, either through a projector or as paged transparencies.
screen: The document will be displayed on a color computer screen.
tty: The document is being presented on a device with a fixed-pitch character grid such as a teletype or character-based display.
tv: The document will be displayed on a television, with a presumably lower resolution color display.

Keep in mind that this list of media types will probably be extended in the future. To play it safe, you should use only these media types when defining style sheets for your documents.

Media Types and Imported Style Sheets

It is possible to control imported style sheets using media types. As you may recall, you can use the @import rule to import style rules contained in a separate style sheet for use in the current document. Normally, the @import rule accepts a single parameter, the URL of the desired style sheet.

If you follow the URL with one or more media types, the external sheet will only be loaded if the document is being rendered for one of those types. For example, to include a sheet only if it is to be rendered by handheld devices, you could say:

     @import url('palm-styles.css') handheld;

In general, you may want to use this method of media type control if you are defining a large set of rules for a specific media type. If you need only tweak one or two rules for a media type, the @media rule is probably more useful.

Next: CSS2: Lists, Bidirectional Text, and Quotation Marks

Chuck is the author of the best-selling HTML: The Definitive Guide and now, the fourth and expanded edition, HTML & XHTML: The Definitive Guide. He also writes on a variety of Internet and Web-related topics for a number of online magazines.

Previously in Tag of the Week

CSS2 Standard Tour: Begin Here
Attribute Sectors in One Quick Bite
Print This!
Using CSS2 to Layout HTML Pages for Print
CSS2 Printing: Left and Right Layouts
Even More CSS2 Printing Power
Breaking Pages

Of related interest: See the Web Review Style Guide, edited by Eric Meyer.