HTML and CSS Reference
In-Depth Information
Figure 16-4 The Cool Shoes & Socks page viewed in Opera Mobile Emulator with an initial-scale of 1 and the
viewport width set to be the same as the device's width.
Using Media Queries
Browser support: IE 9+, Firefox 3.5+, Chrome 4+, Opera 9.5+, Safari 4+
Although the media queries module is a part of the CSS3 specification, these queries are in a Recommendation
status, meaning they are no longer experimental and can be used safely. Unfortunately, Internet Explorer 6, 7, and 8
don't support media queries, but you already took steps in the preceding chapter to work around that issue. What's
more, mobile devices and tablets don't use these older browsers, so media queries and older versions of Internet Ex-
plorer don't pose much of a problem.
As you saw in Chapter 2, you add media types to a stylesheet using the @media rule, for example:
@media screen {
/* styles to be applied to screen devices here */
Any rule sets placed with this @media rule apply only to the screen. Media queries use the same syntax and build
on media types. Whereas the previous media type applied to the screen, the following media query applies to a color
@media screen and (color){
/* styles to be applied to color screen devices here */
You can use the same query with the media attribute in a <link> element, like so:
<link rel=”stylesheet” media=”screen and (color)”
href=”styles.css” />
You place media queries in parentheses () ; they are logical expressions that can either be true or false. Here, if the
media is a color screen, the query is true and the necessary styles are applied; otherwise, the query is false and the
styles are ignored.
Color is just one of the many media features that you can use to compose a media query, which you look at after
learning how to use logical operators.
Using Logical Operators
Logical operators allow you to create complex @media rules—stringing media queries together.
The and keyword enables you to combine features of a query. For example:
@media screen and (color)
Search WWH ::

Custom Search