HTML and CSS Reference
In-Depth Information
Before you can link Kevin's document to this style sheet, you have to set the condi-
tions under which browsers will apply it to Kevin's sample page. You do this through
media queries.
Introducing Media Queries
In the last session, you learned how to use the media attribute to associate style sheets
with particular devices such as screens and printers. However, in a world in which
screens can vary from small handheld devices only a few inches wide to large flat
screen monitors 30 inches or more across, it's often more important to know about the
properties of a device itself rather than what kind of device it is. For this reason, CSS3
introduced
media queries
to allow Web designers to associate style sheets not just with
devices, but with devices that have specific screen sizes, color resolutions, page orienta-
tions, and other display features.
The
media
Attribute in CSS3
A media query uses the same
media
attribute,
@media
, and
@import
rules that were
discussed in the last session. The syntax, though, is different, having the form
media = “
devices
and|or (
features
)”
@media
devices
and|or (
features
) {
styles
}
@import url(
url
)
devices
and|or (
features
)
where
devices
is a list of media devices and
features
is a list of display features and
their values found on those devices. The
and
and
or
keywords are used to create media
queries that involve different devices or different features, or combinations of both.
Figure 8-51 details some of the specific features supported in CSS3.
