Adapt to your audience with CSS media types

- December 23, 2008

In addition to worrying about browsers, Web standards, and more, you also have to consider the multitude of devices or media that may be used to view a site. The CSS media type provides the functionality to build Web applications whose presentation may vary with its target media. Here's an examination of this CSS feature, along with examples.

The media

A CSS media type names a set of CSS properties. A user agent that claims to support a media type by name must implement all of the properties that apply to that media type. Style sheets allow you to specify how a document is presented with different media. For example, viewing a page on the screen should be presented differently than when it is printed or spoken via a speech synthesizer for the visually impaired.

Here's a list of the media types that are currently supported:

all: Applies to all media types.
aural: Used for speech and sound synthesizers.
braille: Provides support for braille tactile feedback devices.
embossed: Used for paged braille printers.
handheld: Used to target small or handheld devices with limited screen space.
print: Applies to printers, so users can easily print a page's content.
projection: Used for projected presentations like slides.
screen: The most common delivery mechanism for Web content: the computer screen.
tty: Used for media using a fixed-pitch character grid, like teletypes and terminals.
tv: This applies to television-like devices such as MSN TV.

With these media types in mind, you can develop separate style sheets to use for the different media that may be used by users who visit your site.

Media-specific CSS

You may specify different media types a variety of ways. First, you may use @import at-rules that specify the media type for an external style sheet that is imported, as the following line accomplishes with importing a special style sheet for tv-based devices.

@import url("webtv.css") tv;

You may use the @media rule to provide presentation rules for handling certain media types within a Web page. The following lines show how this could be used to use a white background for tv-like devices:

@media tv {
background: #fff;
}

The Link HTML element allows you to link to external style sheets and use the media attribute to specify the target media type for the link. The following snippet shows how it may be used:

<LINK rel="stylesheet" type="text/css" media="tv" href="tv.css" mce_href="tv.css">

A caveat of each approach is that you may specify more than one media type for a rule by separating the individual media types with commas. For example, the previous HTML snippet can be rewritten to target tv-like media as well as projection media with the following line.

<LINK rel="stylesheet" type="text/css" media="tv, projection"
href="tv.css" mce_href="tv.css">

In action

Different media types are supported so you can format content differently for the various device or media types available. A good example is printing where items like menus and sidebars are omitted (most often using display: none) in the printed output. (Check out Shawn Morton's article about building printer-friendly pages.)

The following CSS is included as a brief example of formatting content for different media types. The background is blue for regular screens and white for printed or handheld output. Also, the font size is set to easier to read 12 point for printed output and smaller for handhelds. The font family is set to apply to all media types.

<style type="text/css">
@nedia all {
font-family: sans-serif;
}
@media handheld {
body {
border: none;
padding-bottom: 5px;
font-size: 8pt;
background: white;
}
h1, h2 {
 font-size: 10pt;;
} }
@media screen {
body {
background: blue;
font-size: 10pt;
} }
@media print {
body {
width: auto;
margin: 0 5%;
padding: 0;
font-size: 12pt;
} }
</style>

The size of the style sheet for each media type will be much larger than this simple example in real-world applications, so placing each media type's code in separate files and using the Link element will save bandwidth with less code to download. A key issue with any Web standard is its support within the community.

Support

CSS media types are a part of the CSS2 standard, but browser adoption and compliance has been very slow. The media type values of all, screen, and print are well supported, but the remaining types have only received limited support within the browser market. You should test vigorously to ensure the results match expectations with target platforms.

At this time, the handheld media type is supported by some devices and software, so you should test with target devices to measure support. The Opera browser supports the projection media type, but support outside of Opera is limited. Support for the other media types like braille, tv, tty, embossed, and aural is almost non-existent. The Emacspeak browser utilizes the aural media type.

Know your audience

The CSS2 specification includes the media type feature, which allows developers to tailor content for certain media types via style sheets. The feature has been adopted in a piecemeal fashion by the Web community as the print and screen types are fully supported, while support for others is inconsistent and sometimes non-existent. Meanwhile, the CSS3 standard moves forward with the goal of enhancing the media type feature.

Have you included media type support in your Web applications? Share your thoughts and experiences with CSS and media types with the Web developer community by posting to the discussion.

Additional CSS resources from TechRepublic

Date: April 4th, 2008
Author: Tony Patton

Search This Blog

Tools & Technologies IT