introduction ~ selectors ~ properties ~ advanced ~ real world CSS cascade & inheritance | font specification | generated content | media | printing

media

An important assumption underlying CSS1 was that web pages were viewed using a personal computer with a monitor. But there are many more ways to access a web page than simply via computer and monitor. And each of these different media have their own characteristics. They may be monochrome, limited in size, they may be "aural" and read web page content aloud. They may be television based, like WebTV. And looking toward the future, we really have no idea what they will be like.

CSS2 provides a way to tailor a style sheet to the particular medium that is being used to display a page. Inside the same style sheet you can have different parts for printing, handheld devices, monitors and so on. Additionally, different style sheets can be imported depending on the medium used for browsing.

In this section we will take a look at how these work.

The @media rule

The @media rule is a subset of a style sheet specific to a particular type of medium, or group of media.

An @media rule specifies the medium or media to which it applies, then contains a number of statements, exactly like the statements we usually find in a style sheet. These statements apply only when a web page associated with this style sheet is being displayed using one of the media to which the @media rule applies.

@media rules are straightforward to construct. They comprise

• the keyword @media
• a list of media types, separated by commas
• the statements to be applied to this group of media, contained inside curly braces "{" "}"

These statements are identical to the statements we have seen in previous sections.

For example, the following rule applies a white background and black text color to the body of page when it is being printed or when it is being displayed on a handheld device.

Types of media

CSS2 provides for the following media types, as described in the recommendation

• all Suitable for all devices.
• aural Intended for speech synthesizers.
• braille Intended for braille tactile feedback devices.
• embossed Intended for paged braille printers.
• handheld Intended for handheld devices (small screen, monochrome, limited bandwidth).
• print Intended for paged, opaque material and for documents viewed on screen in print preview mode.
• projection Intended for projected presentations, for example projectors or print to transparencies.
• screen Intended primarily for color computer screens.
• tty Intended for media using a fixed-pitch character grid, such as teletypes, terminals, or portable devices with limited display capabilities. Authors should not use pixel units with the "tty" media type.
• tv Intended for television-type devices (low resolution, color, limited scrollability).

Browser support

Detailed browser support information for this feature can be found in the Westciv CSS Guide, or in our CSS Browser Support Table.

Media specific importing using @import

In addition to the media rule, CSS2 allows conditional importing of style sheets based on the current medium. This means that a style sheet will only be imported when a page is being displayed in a particular medium. This is particularly useful for low bandwidth media, like handhelds, which generally are wireless based. With an imported style sheet based on the medium, only the statements specific to the particular medium need to be downloaded.

To conditionally import a style sheet based on the current medium, create a standard @import rule, but add the names of the media that will cause the style sheet to be imported directly after the rule in a comma separated list.

For instance, to import a style sheet called monochrome.css when a page is to be printed or displayed on a handheld device you would create the following @import rule.

@import url(monochrome.css) print, handheld

For more on @import rules, see the section of on types of rules in CSS.

Hints and suggestions

Media specific importing essentially achieves the same outcome as using the @media rule described above. The difference is that if you use the @import rule the user agent does not even have to download the imported style sheet unless it is relevant. This will be a very powerful technique for designing for technologies such as handheld and mobile devices. It will be very important for these devices to support the @import rule.

Browser support

See the Westciv CSS Guide, or our CSS Browser Support Table.

next: printing

(C)1997-2001 Western Civilisation Pty. Ltd.