HTML5 & CSS - media queries operators question

问题:

I was wondering if someone can explain what each of the media queries in the example below mean in simple terms?

Here is the examples.

media="not screen and (color)" 
media="projection, screen and (color)" 
media="only projection and (color)"

回答1:

To analyze what media queries mean, you basically need to keep these things in mind:

1. A comma means "or".
2. The unparenthesized thing at the beginning of a media query is the name of the medium the query is for (unless that word is "not" or "only", in which case the second word is the medium involved.
3. "not" negates everything up to the comma that follows.
4. Things in parens are modifiers.
5. The algorithm HTML4 specified for parsing media is horribly broken: it just extracts the first word from each part between commas. The keyword 'only' was introduced to allow media query authors to work around this bug. A UA that implements media queries just ignores this keyword.

So now in order.

Your first media query selects everything that's not a "screen and (color)". So it selects anything that's not a color screen (i.e. non-screens and also monochrome screens).

Your second media query selects anything that's a projection medium (whether color or monochrome) or a color screen.

Your third media query selects color projection media in UAs that implement media queries. In a UA that implements the HTML 4 algorithm, it's ignored because "only" is not an HTML 4 media specifier. If "only" were left out, then in old UAs it would select all projection media, because it would just extract that first word and ignore the "and (color)" part.