Page 1 of 3
What are media types and why should I care?
Using Media types, outlined by the W3C here, can open up a whole host of opportunities for restyling your content to cater to a variety of different devices. These days, not all users will be viewing your web site on a computer screen. Media types can also open up a couple of cans of worms if you're still supporting archaic browsers, but we'll talk about that in a bit.
If you've begun to use Cascading Style Sheets for styling your screen documents, you've seen how powerful CSS really is. You may have even ventured into the realm of creating a print style sheet to facilitate a user's ability to print your web pages. If so, you already know that you had to specify the target medium (print) using the media attribute on the <link> element. Or maybe you just copied something a friend told you to use and you really have no idea what you did. Likely the element in the head of your document looked something like this:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
Tip: If you have not yet created a print style sheet, see Adrian Senior and Stephanie Sullivan's article in Macromedia's DevNet Center for a behind-the-scenes look at the creation of the Community MX print style sheet.
Recognized Media Types
There are presently 10 recognized media types in CSS 2; all, aural, braille, embossed, handheld, print, projection, screen, tty, and tv. CSS 2.1, which as of this writing has not reached full W3C recommendation status, switches speech for aural in this list. These media types allow you to indicate to specific user devices, different methods of styling and presenting your content. As the list of possible devices grows, it is likely that more will be added. The names chosen for these media types are not case sensitive and should be fairly self-explanatory, but in case they're confusing, here's the list according to the W3C site:
|all||Suitable for all devices.|
|aural||Intended for speech synthesizers. See the section on aural style sheets for details.|
|braille||Intended for braille tactile feedback devices.|
|embossed||Intended for paged braille printers.|
|handheld||Intended for handheld devices (typically small screen, monochrome, limited bandwidth).|
|Intended for paged, opaque material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.|
|projection||Intended for projected presentations, for example projectors or print to transparencies. Please consult the section on paged media for information about formatting issues that are specific to paged media.|
|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 screens, sound available).|
Due to the variety of unique characteristics each media has, each media type may have certain properties that are unique to it. Some examples are:
- page-break-before - applies only to paged media
- pause-before - applies only to spoken media
These unique properties allow you more control within each media itself.
Note: Several of the above definitions will change slightly when CSS 2.1 becomes a full recommendation of the W3C. See the CSS 2.1 specification for Recognized media types for more information on the differences.