simon simon - 1 year ago 67
CSS Question

CSS media query: W3 validator fails when negating query without media type - bug or part of specification?

I'm validating some CSS media queries using the W3C CSS Validation Service.

The following query is shown as valid:

@media (min-width: 1024px) and (orientation: landscape) and (min-resolution: 1dppx){}

The following negated query is shown as not valid:

@media not (min-width: 1024px) and (orientation: landscape) and (min-resolution: 1dppx){}

and this query, where the media type is added to the previous, negated query is shown as valid:

@media not screen and (min-width: 1024px) and (orientation: landscape) and (min-resolution: 1dppx) {}

So, apparently the validation service requires that the media type ("screen" in this example) is present before accepting the "not" keyword. I could not find any reference to this behaviour in the CSS3 specification at Is this a bug in the validator or part of the CSS specification?

Answer Source

The syntax defined in the CSS3 Media Queries specification indicates that it only accepts "not" (and "only") can only be used before a media type:

 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND S* expression ]*

(although it applies to the query as a whole)