HEYGB.COM

Different Type of Media Types in CSS

CSS provides an easy way to target browsers on different types of devices, or different uses. For example, the design you produce for a normal desktop browser may not be suitable for a handheld device, or a printer. These are known as media types.

There are several media types, and most browsers will generally concentrate on just one or two, depending on what they are designed to be used for. Opera is by far the most versatile, and supports six different media types.

All major browsers use screen media as their default, and will apply screen media when viewing a Web page normally. Most of them also support print media and will use that when printing a page. Projection media is used for fullscreen view in Opera (version 9 and above will fall back to screen media if there is none for projection), and is designed for displaying on projector displays.

Handheld media is used on handheld devices, small screens or narrow displays. It is supported by Opera, OpenWave, supposedly by Obigo, and partially by Pocket Internet Explorer. Some television browsers (including Opera) support TV media. Aural media, renamed to Speech in CSS 2.1, is used when the page is being read by a voice synthesizer. Opera supports speech media when the voice module is installed.

In theory, a browser should only apply one media type at any time. Escape 5 breaks this rule by applying screen and projection media types simultaneously (it never applies handheld, even though it is supposedly designed for devices). WebTV/MSNTV breaks this rule by applying screen and tv media types simultaneously. Pocket Internet Explorer also breaks this rule.

It completely ignores inline media declarations, and if specified in a media attribute, it mistakes screen and handheld for each other, and applies both of them at the same time as each other, even if you tell it to use only screen media (desktop). NetFront makes mistakes with @media rules and may apply styles from rules inside all of them, no matter what media types are specified.

Most of the normal styles are available to all media types, but there are some styles that only make sense in some media types. For example, the font-size and cursor styles do not make any sense in speech media. Some styles are only available in certain media types. For example, the page-break-before style is only available in media types that support pages display, such as print, projection, and TV.

If your design does not work well in other modes, you should consider adding different styles for different media types. For example, if your design is suited only to desktop displays (maybe it limits the minimum resolution to 1024×768 or 800×600) you may want to add some styles to make it work on handheld devices, instead of expecting those browsers to reformat your page. If your navigation relies on visual identifiers, such as rollover effects, you may want to add extra styles for handheld devices, which generally do not have a mouse.

And you may want to add some extra words to the speech and aural medias to help speech users make sense of it. Similarly, you may want to add extra information to braille media. Or maybe you want to hide your navigation when printing the page.