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
• 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
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.
Search WWH ::

Custom Search