Making Your Website Look Great Across Multiple Devices - CSS3 Foundations - page 267

In this query, the media must be a screen and a color one at that. If the media is a screen but can display only black
and white, the @media rule is false and the styles don't apply.
Or
To specify a logical OR expression, you can list queries, separated by a comma. For example:
@media screen and (color), projection and (color)
This query applies to color screens or color projectors. Only one of the queries in the list needs to be true for the
@media rule to be true.
Not
When you use the not keyword, the result of a media query is negated. The following @media rule is true on a col-
or screen:
@media screen and (color)
The following is false for a color screen but true for everything else:
@media not screen and (color)
This means anything that isn't a color screen has the specified styles applied to it.
Only
Because older browsers can read @media rules but not media queries, older browsers may ignore the query and still
apply a stylesheet regardless of whether the query is true or false. To prevent that from happening, you can place the
only keyword at the start of an @media rule to make older browsers ignore the entire rule, like so:
@media only screen and (color)
Modern browsers know that the only keyword is just present to throw off older browsers, and they continue reading
everything after it. The only keyword is used with every Cool Shoes & Socks @media rule.
Applying Styles to Specific Media Features
Media features, such as color shown previously, are used in media queries to describe the requirements of the en-
vironment you want to apply styles to.
Many features accept optional min- or max- prefixes to express “greater than or equal to” and “less than or equal
to.” For example, min-width: 100px is true for anything with a width of 100px or more.
In this section, below the name of each media feature, you see which media type a media feature applies to and
whether it supports min- and max- prefixes.
Let's look at what each media feature describes and then implement some of them into the Cool Shoes & Socks
stylesheet.
width