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 ) {
@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.
Search WWH ::

Custom Search