HTML and CSS Reference
In-Depth Information
figure 8-35
Media devices
Used For
All output devices (the default)
Braille tactile feedback devices
Paged Braille printers
Mobile devices with small screens and limited bandwidth
Computer screens
Speech and sound synthesizers
Fixed-width devices such as teletype machines and terminals
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”>
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 {
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
Search WWH ::

Custom Search