These days, not all users will be viewing your web site on a computer screen. Using Media types can open up a whole host of opportunities for restyling your content to cater to a variety of different devices. 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 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 (www.macromedia.com/devnet/mx/dreamweaver/articles/screen_to_print.html)'

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 is now a Candidate W3C Recommendation, 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, Table 1 is the list according to the W3C site:

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

Media Type Tips to Keep in Mind
First, it is imperative to know which browsers and devices you are supporting. Take a look at your client's current browser statistics, or request detailed information regarding their desired browser and device support. This information determines the method you choose to specify your media-dependent style sheets.

Browser support for some of the media types can be tough. Netscape 4 doesn't support anything but screen, and even that may be buggy. Luckily though, the other media types won't choke it. IE4 can read all, screen, and print, so if that browser must be supported, you can't use the same tricks you use for NN4. Personally, I'm doing less and less for those old gals. I want them to receive the same information in a neat logical order, but outside that, unless a client's stats show me otherwise, the styling they see will be minimal.

My main goal for legacy browsers is to make sure they don't choke on the web pages. For more on CSS support in old browsers, RichInStyle.com has a CSS support chart (www.richinstyle.com/bugs/table.html) with information on browser support for the screen, all and print media types, among other CSS properties. The chart doesn't include any version-6+ browsers, but is good for keeping track of elderly browser support.

All
According to the CSS2 recommendation, if a media type is not specified, it should default to the all media type. Most browsers follow this guidance. The all media type can be used for properties that are available to all media devices. This sheet will start the CSS cascade, and from there, the specific devices, if in compliance, will continue by parsing their specific style sheet. You should note however, that older versions of Opera used media screen as their default display.

Screen
Screen is the most commonly used media type. At this time, the majority of assistive technology products available read the screen style sheets instead of aural ones. I hope that they'll catch up sooner rather than later. Remember though, that style sheets given the screen media type will not be used for any of the other devices, including printers.

Handheld
If you're creating a CSS document for handheld media, remember that you're creating not only for a small screen, but likely also a monochromatic one, with very little bandwidth or memory available. Sometimes the connection may be less than optimal as well. Be sure to use the {display:none} property to remove any extraneous page information to keep the display simple. Give them, "just the facts!" Here are some tips from the AcIS Handheld Report:

• Use very few, low-resolution, or low color depth images
• Use alt text for all images
• Keep individual pages short
• Use very little text formatting
• Keep page formatting flexible to fit many screen shapes and sizes

Projection
This one is pretty nifty in my opinion. I first saw it in action at the fifth TODCON web conference event a couple years ago during Eric Meyer's presentation and later used it in my own. Opera still uses this media type to the best advantage. You can create a presentation for viewing either full screen or on an overhead projector.

This page on OperaShow (www.opera.com/support/tutorials/operashow/index.dml) gives you full instructions, but in a nutshell, you create your presentation as one long HTML document and then create the page breaks. This could even be used for an existing web site where the screen display looks completely different from the one needed or wanted for the projection device. There are some interesting styling possibilities that are available with this method. For example, you can place a watermark-type background image that will appear on each projected page. Simply set the image positioning value to fixed image in the body element in your CSS document. Or, you can give an interesting bordered heading style to the <h1> element that will be at the top of each page. In action, this one looks like magic - or even PowerPoint!