Web Development

Adapt to your audience with CSS media types

The CSS media type allows you to build Web applications that take into account how users may use or view your site. Find out more about including media type support in your apps.

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

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox
Keep your developer skills sharp by signing up for TechRepublic's free Web Developer newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

10 comments
boxfiddler
boxfiddler

I greatly appreciate the snippets of 'code'.

glenngor2001
glenngor2001

As usual, very cryptic and hard to understand

matt.meckes
matt.meckes

It's a shame that media types are so badly supported. Many handhelds seem to prefer to use a proprietary syntax. Even displaying CSS to all Blackberry models can be a nightmare. I think it is more important to write flexible CSS that can be viewed on a wide variety of devices, and HTML that is still clear with CSS disabled, rather than write separate style sheets for every possible viewing device.

Justin James
Justin James

... yet under utilized. I think, Tony, that this is one of the most critical pieces of information that needs to be pounded into the head of every Web developer. Thank you for writing this excellent intro to the topic. J.Ja

Jaqui
Jaqui

but design the default to work with the most devices. [ translation: uses the least features ] The extremely limited browser lynx is the perfect testing vehicle. it will display pages like most palm-tops will, no tables, no frames, no images, no javascript, no css styles. if your site is functional in lynx, then the website is functional for everyone, even those using things like braille terminals. [ lynx won't display the images, or use the tables for layout, so it's perfect for showing what most palm-top devices will present. ] edit to add: My own site, not the best looking site by far, but it works for everyone, no matter what technology they need to use. http://jaqui-greenlees.net

boxfiddler
boxfiddler

"The extremely limited browser lynx is the perfect testing vehicle." Thanks.

Jaqui
Jaqui

lynx is a search engine bot, with it's output made to be human readable, rather than a file for use by a data base. like I said, basic functionality in the (x)html for lynx, looks in the css for more capable user agents. then you have a site that can be used by anyone, meeting the WAI guidelines for those requiring assistive technologies is only adding alt text to images and a skip to content / back to navigation set of links.

Justin James
Justin James

... search engines, who are quite possible the most important user agent as all; without them being able to grok your page, few other user agents will likely access your site. :) And, of course, screen readers for the visually impaired. J.Ja