HTML and CSS Reference
In-Depth Information
greater distance). Similar to the
media
attribute, the
@media
rule also allows you to place
media types in a comma-separated list, as in the following declaration:
@media screen, print, handheld, tv {
h1 {font-family: sans-serif;}
}
Both the
media
attribute and the
@media
rule come with their own benefits and
disadvantages. The
@media
rule enables you to consolidate all of your styles within a
single style sheet; however, this consolidation can result in larger and complicated files.
The alternative—placing media styles in different sheets—can make those sheets easier
to maintain; however, if you change the design of your site, you might have to duplicate
your changes across several style sheets.
Finally, you can specify media devices when importing one style sheet into another.
The
CSS
rule
@import url(screen.css) screen;
imports the
screen.css
style sheet file in the current style sheet only when the browser
device is a screen.
Media Groups
The distinction among the different media devices is not always immediately clear.
For example, how is projection media different from screen media? The difference lies
in what kind of output can be sent to the media. All output devices can be described
based on some common properties. CSS uses
media groups
to describe how differ-
ent media devices render content. There are four media groups based on the following
characteristics:
• continuous or paged
• visual, audio, or tactile
• grid (for character grid devices) or bitmap
• interactive (for devices that allow user interaction) or static (for devices that allow no
interaction)
Figure 8-36 shows how all output media are categorized based on the four media
groups. For example, a printout is paged (because the output comes in discrete units or
pages), visual, bitmap, and static (you can't interact with it). A computer screen, on the
other hand, is continuous, visual, and bitmap, and can be either static or interactive.
