1

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 https://www.w3.org/TR/css3-mediaqueries/ Is this a bug in the validator or part of the CSS specification?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
simon
  • 12,666
  • 26
  • 78
  • 113
  • Not a bug, just a mind-boggling restriction that I can't fathom why it is there. – BoltClock Aug 18 '16 at 10:39
  • 1
    This is one edge case where the all keyword is in fact required. See [this answer](http://stackoverflow.com/questions/28692635/does-all-add-anything-to-a-media-query/28692726#28692726). Also this may be a duplicate of [Why does `not (some-width: Xem)` media query never fire?](http://stackoverflow.com/questions/24455958/why-does-not-some-width-xem-media-query-never-fire) - usually the Jigsaw validator is horrifically unreliable and buggy but in this case its validation result is consistent with 1) browser behavior, and 2) spec. – BoltClock Aug 18 '16 at 10:44

2 Answers2

2

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:

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

(although it applies to the query as a whole)

dontcallmedom
  • 2,420
  • 14
  • 12
0

My guess it that you need to use a recognized screentype when using the 'not' keyword, otherwise your browser would try and apply the stylesheet to a 'not' screen

David Taiaroa
  • 25,157
  • 7
  • 62
  • 50
  • The default media type is all, not screen. Why is it so unreasonable for a browser to infer that the media query should apply to "not all and..." if the media type isn't specified, when it already does with media queries without the not keyword? – BoltClock Aug 18 '16 at 10:40
  • @BoltClock, my reasoning was that you needed a media_type when using the 'not' keyword, otherwise validation would see 'not' as an invalid media_type. dontcallmedom above has the definitive answer though – David Taiaroa Aug 18 '16 at 11:14
  • Ah... that actually makes sense. – BoltClock Aug 18 '16 at 11:56