The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

252 Chapter 19

Module (http://www.w3.org/TR/css3-conditional/), which extends queries not

only to use conditions based on device/UA properties such as dimension

and resolution, but also to allow the definition of CSS rules that only apply

if a particular CSS feature is supported.

These new conditional rules, known as feature queries, are defined with

the new @supports rule. The @supports syntax is similar to @media, except it

requires a CSS property-value pair (or pairs) as an argument. If the browser

supports the property-value pair, the defined rules are applied.

For example, to test if a browser supports Flexbox, the conditions of the

test are that it recognizes the display property with a value of flex:

@supports (display: flex) {...}

In a modern browser that has implemented Flexbox (and @supports, of

course), the property-value pair is recognized, and the rules in the curly

brackets are applied. Older browsers without Flexbox support won’t recog-

nize that combination of property and value and will skip the rules.

As with media queries, you can use logical operators—and, or, and not—

with feature queries. For example, to see if a browser supports both Flexbox

and Transitions, you use and:

@supports (display: flex) and (transition: 1s) {...}

If a property has multiple implementations using vendor prefixes and

you want to test that the browser has any one of those implementations, you

use or:

@supports (animation-duration: 1s) or (-webkit-animation-duration: 1s) {...}

And to see if a browser doesn’t support a particular property, you

use not:

@supports not (display: flex) {...}

As of this writing, the @supports rule is implemented in Chrome and

Firefox and listed as “In Development” for Internet Explorer. Webkit has

implemented it experimentally, but as of this writing it is not listed for

release in Safari 8. In these browsers, rules inside the @supports declara-

tion block will be ignored.

Device Adaptation

One critical part of implementing responsive design with media queries

is the ability to set viewport properties, using the viewport meta tag (see

“Device Width and Height” on page 15). Unfortunately, the viewport meta

tag is not without its problems—not least of which is that the initial imple-

mentation was undocumented, meaning other browser vendors had to

reverse-engineer it, leading to small interoperability issues. The CSS Device