HTML and CSS Reference
In-Depth Information
Media Queries
With media queries, an author can define the media environment in which a given style sheet
is used by the browser. In the past, this was handled by setting media types with the media
attribute on link elements or the media descriptor on @import declarations. Media queries
take this concept several steps further by allowing authors to choose style sheets based on the
features of a given media type.
Basic Concepts
The placement of media queries will be very familiar to any author who has ever set a media
type. Here are two ways of applying an external style sheet when rendering the document on
a color printer:
<link href="print-color.css" type="text/css"
media="print and (color)" rel="stylesheet">
@import url(print-color.css) print and (color);
Anywhere a media type can be used, a media query can be used. This means that it is possible
to list more than one query in a comma-separated list:
<link href="print-color.css" type="text/css"
media="print and (color), projection and (color)"
@import url(print-color.css) print and (color),
projection and (color);
In any situation where one of the media queries evaluates to “true,” the associated style sheet
is applied. Thus, given the previous @import , print-color.css will be applied if rendering
to a color printer or a color projection environment. If printing on a black-and-white printer,
both queries will evaluate to “false” and print-color.css will not be applied to the docu-
ment. The same holds for any screen medium, a grayscale projection environment, an aural
media environment, and so forth.
Each query is composed of a media type and one or more listed media features. Each media
feature is enclosed in parentheses, and multiple features are linked with the and keyword.
There are two logical keywords in media queries:
Search WWH ::

Custom Search