Tags:
CSS Media Types
CSS is a wonderful thing, but most people only ever use it for styling HTML on a regular computer screen. The fact is, CSS has, right from the beginning, had a much wider potential audience. The following code excerpt shows you how you might use alternative stylesheets for rendering your web page on some form of media that isn't a compupter screen:
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
This basically tells the display agent (this is the generic name for your browser, as it is not only your browser that will see this) that you have two stylesheets, one for the screen, and one for when this page it printed. Don't see the point? Imagine your website consists of a load of a very large header graphic and a bunch of adverts that run down the side. This is fine for the screen, as you can scroll around, and you generally have more room. On paper, people don't want to waste ink on header graphics, and aren't interested in your adverts, so why not turn them off? Does the text rely on the background colour to contrast? Most browsers won't print background colours, so your light grey text on a dark green background won't work at all when it's printed.
The idea of specifying different stylesheets to use when the page is being rendered on a different medium is to enhance the page specifically for that medium. Below is a table of all the other available media types:
| Media Type | Description |
|---|---|
| all | Used for all media types, so you can set some styles for every type of medium. This is the default. |
| aural | See speech. |
| braille | Used only for Braille tactile feedback devices. |
| embossed | Used for display on paged Braille printers. |
| handheld | Used for handheld devices, such as mobiles. |
| Used for printed media. | |
| projection | Used for projection monitors |
| screen | For use on computer screens. This is the most typical media, although not the default. |
| speech | Used with speech browsers. This is, for now, the same as 'aural', although in the future it's use may be adapted slightly. |
| tty | Used for fixed-pitch character grid devices, such as terminals and teletypes. You should not use pixel units for this medium. |
| tv | Used for television and television-like output, where the screen is often low-colour, low-resolution and has limited or not scrolling capabilities. |
If your webpage is being displayed on a medium that can find no matching stylesheet, it will often attempt to make the best of what is available, which does not always give the optimum 'viewing' experience.
Comments