blog
Media Types
Posted: 16 Aug 2001 by Rachel Andrew
Today’s web developer is being faced with an ever increasing number of browsers and devices used to access their web pages. Alternate devices used by the visually impaired have become higher profile in recent months but devices such as PDAs and Web TV are also on the increase. How is anyone supposed to design and develop pages for this myriad of possibilities?
I believe that the answer lies with the separation of style from content (using CSS to lay out your pages rather than tables) and the all powerful media descriptors.
Combining CSS positioning and the media types enables us to include far more devices and browsers than ever before, while still being able to use lots of interesting and exciting new techniques on our pages.
The Basics
Here are the list of media types from the W3C CSS2 Specification:
all
Suitable for all devices.aural Intended for speech synthesizers (speaking browsers)
braille Intended for braille tactile feedback devices.
embossed Intended for paged braille printers.
handheld Intended for handheld devices (typically small screen, monochrome, limited bandwidth).
print documents to be printed
projection Intended for projected presentations
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
To read up more about the W3C’s recommendations for media types, visit http://www.w3.org/TR/REC-CSS2/media.html
It’s a long list, the most useful for most people are ‘all’, ‘print’,’screen’ and possibly ‘aural’
To use these media descriptors you have two choices. Probably the easiest to understand is specifying a separate stylesheet for each media type that you need to use. Like so:
you will recognise this as a linked css file, but this css file doesn’t determine what the user sees on the screen. Most users will never see the effect of this stylesheet because it is only called into action when the document is printed. You can use this method to include as many stylesheets as you like, one for each media type.
The other method means that you can specify different media types within one stylesheet. To use this method use @import to attach your stylesheet to your page, like so:
@import “complete.css”;
this will attach the stylesheet to your page, within the stylesheet you now need to add your attributes for each media descriptor. You do this using @media as shown below, in this stylesheet printed documents will print with a font size of 10pt, on the screen the font will display at 12pt, both print and screen will display in black (#000000)
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12px }
}
@media screen, print {
BODY { color: #000000}
}
An example usage:
Most web developers, at some time or another are asked to create a print version of a page, simple pages often print without any problems, but graphic intensive pages can become expensive to print out and some designs just aren’t readable when printed.
With your print stylesheet you simply specify the areas of the document that you want printed, and which you want invisible to the printer. You could even use a different font for print, change the colours and the heading styles, all this with only one extra stylesheet, or a section in the existing stylesheet using @media.
The below code shows a print stylesheet that will print the div ‘maintext’ as 10pt and will not print the div ‘navbar’.
body {
background-color: #FFFFFF;
color: #000000;
}
#maintext {
font-size: 10pt;
}
#navbar {
display: none;
}
The bad news:
This method relies on the browser reporting identifying itself correctly and being able to display the correct stylesheet. In the newer traditional browsers it seems to work well.
Netscape 4.x does not recognise the @import method of attaching the stylesheet at all, so if you want to use that method you need to find another way of dealing with earlier browsers. The only media descriptor Netscape 4.x recognises in linked stylesheets is ’screen’. As long as you have a media=”screen” stylesheet NS4.x will be able to render your page with the limited amount of CSS it recognises. It will not recognise your print stylesheet.