HTML and CSS Reference
In-Depth Information
figure 8-35
Media devices
Device
Used For
all
All output devices (the default)
braille
Braille tactile feedback devices
embossed
Paged Braille printers
handheld
Mobile devices with small screens and limited bandwidth
print
Printers
projection
Projectors
screen
Computer screens
speech
Speech and sound synthesizers
tty
Fixed-width devices such as teletype machines and terminals
tv
Television-type devices with low resolution, color, and limited scrollability
For example, to specify that aural browsers should render your Web page using the
sounds.css
style sheet, you could enter the following
link
element in the HTML file:
<link href=”sounds.css” type=”text/css” media=”speech” />
In the same way, you would use the following
media
attribute in an embedded style
sheet to indicate that its styles are intended for aural devices:
<style type=”text/css” media=”speech”>
...
</style>
The
media
attribute also can contain a comma-separated list of media types. The follow-
ing
link
element points to a style sheet designed for both print and projection media:
<link href=”output.css” type=”text/css” media=”print, projection” />
Style sheets cascade through the media types in the same way they cascade through
a document tree. A style sheet in which the output device is not specified is applied to
all devices, unless it is superseded by a style designed for a particular device. When no
value is given to the
media
attribute, any style defined in the embedded or external style
sheet is used for all media, where applicable.
The
@media
and
@import
Rules
It's not always convenient to maintain several different style sheets for the same docu-
ment. In place of several style sheets, you can use a single style sheet broken down into
different sections for each media type. This is done using the rule
@media
devices
{
styles
}
where
devices
is the supported media types and
styles
is the style rules associated
with those devices. For example, the following style sheet is broken into four sections
with different styles for screen, print, handheld, and television media:
@media screen { body {font-size: 1em;} h1 {font-size: 2em;} }
@media print { body {font-size: 12pt;} h1 {font-size: 16pt;} }
@media handheld { body {font-size: 8px;} h1 {font-size: 12px;} }
@media tv { body {font-size: 20px;} h1 {font-size: 18px;} }
In this style sheet, the font size is smallest for a handheld device (which presumably
has a limited screen area) and largest for a television (which is usually viewed from a
