Contents
One of the most important features of style sheets is that theyspecify how a document is to be presented on different media: on thescreen, on paper, with a speech synthesizer, with a braille device,etc.
Certain CSS properties are only designed for certain media (e.g.,the
There are currently two ways to specify media dependencies forstyle sheets:
Example(s):
@import url("fancyfonts.css") screen;@media print { /* style sheet for print goes here */}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><HTML> <HEAD> <TITLE>Link to a target medium</TITLE> <LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css"> </HEAD> <BODY> <P>The body... </BODY></HTML>
The@import rule is defined inthechapter on the cascade.
An@media rulespecifies the targetmedia types (separatedby commas) of a set ofstatements (delimited by curlybraces). Invalid statements must be ignored per4.1.7 "Rule sets, declaration blocks,and selectors" and4.2"Rules for handling parsing errors." The
@media print { body { font-size: 10pt } } @media screen { body { font-size: 13px } } @media screen, print { body { line-height: 1.2 } }Style rules outside of @media rules apply to all media typesthat the style sheet applies to. At-rules inside @media are invalid inCSS2.1.
The names chosen for CSS media types reflect target devices forwhich the relevant properties make sense. In the following list of CSSmedia types the names of media types are normative, but thedescriptions are informative. Likewise, the "Media" field in the description of each property is informative.
Media type names are case-insensitive.
Media types are mutually exclusive in the sense that a user agent canonly support one media type when rendering a document. However, useragents may use different media types on different canvases. Forexample, a document may (simultaneously) be shown in 'screen' mode onone canvas and 'print' mode on another canvas.
Note that a multimodal media type is still only one mediatype. The 'tv' media type, for example, is a multimodal mediatype that renders both visually and aurally to a single canvas.
@media and @import rules with unknown media types (that arenonetheless valid identifiers) are treated as if the unknown mediatypes are not present. If an @media/@import rule contains a malformedmedia type (not an identifier) then the statement is invalid.
Note: Media Queries supercedes thiserror handling.
Example(s):
For example, in the following snippet, the rule on the P element appliesin 'screen' mode (even though the '3D' media type is not known).
@media screen, 3D { P { color: green; }}Note.Future updates of CSS may extend the list of media types. Authorsshould not rely on media type names that are not yet definedby a CSS specification.
This section is informative, not normative.
Each CSS property definition specifies which media types theproperty applies to. Since properties generally apply to several mediatypes, the "Applies to media" section of each property definitionlistsmedia groupsrather than individual media types. Each property applies to all mediatypes in the media groups listed in its definition.
CSS 2.1 defines the following media groups:
The following table shows the relationshipsbetween media groups and media types:
| Media Types | Media Groups | |||
|---|---|---|---|---|
| continuous/paged | visual/audio/speech/tactile | grid/bitmap | interactive/static | |
| braille | continuous | tactile | grid | both |
| embossed | paged | tactile | grid | static |
| handheld | both | visual, audio, speech| both | | |
| paged | visual| static | | ||
| projection | paged | visual | bitmap | interactive |
| screen | continuous | visual, audio | bitmap | both |
| speech | continuous | speech | N/A | both |
| tty | continuous | visual | grid | both |
| tv | both | visual, audio | bitmap | both |