TIPS and TRICKS - Web Page Design
CSS Media Types
Displaying Your Pages Differently to Different Media
By Jennifer Kyrnin
CSS media types allow you to format your documents to display correctly on various types of media, such as on the screen, on paper or in braille.
The valid media types are:
- all
The styles should be used for all media types. - screen
The styles should be used on color computer screens. - print
The styles should be used on paper formats and documents viewed in "print preview" mode. - tv
The styles should be used on television style devices, with low resolution, color and sound. - handheld
The styles should be used on small, usually monochrome, devices such as phones or PDAs. - projection
The styles should be used with projection devices like overheads. - tty
The styles should be used on teletype style devices with a fixed-pitch character grid. - aural
The styles should be used with speech # synthesizers. - braille
The styles should be used with braille devices. - embossed
The styles should be used on paged braille printers.
You can define media types in several ways:
@media print { p { font-size: 14pt;} }
@import url("import.css") tv;
Browser Support
Netscape 4 only recognizes the "screen" media type - and it only recognizes it in the first example. IE 4 Windows and 4 and 5 Macintosh don't support the @media or @import media type designations.
