Created attachment 298806 [details] reduced test case Currently, media query can be negated only when the the "not" token precedes the <media-type>. In cases where <media-type> is not specified, <media-feature> is not negated. According to "2.5 Combining Media Features", a <media-feature> should be negated when it is preceded by the "not" token. specs: Syntax, BNF https://www.w3.org/TR/mediaqueries-4/#mq-syntax Combining Media Features https://www.w3.org/TR/mediaqueries-4/#media-conditions
<rdar://problem/30022550>
Here's how I'm reading the spec.... Suppose we have: div { width: 100px; height: 100px; background-color: red; } @media not (min-width: 600px) { div { background-color: blue; } } Then the @media rule follows [[[ 2.2.1. Negating a Media Query: the not keyword An individual media query can have its result negated by prefixing it with the keyword not. If the media query would normally evaluate to true, prefixing it with not makes it evaluate to false, and vice versa. ]]] And it gives an example. However, I don't this this rule applies in this case. Check out Section 3. Syntax. <media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]? In our example, it matches <media-condition>, rather than "not <media-type>". <media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens> Cool. It looks like we are a <media-not>. <media-not> = not <media-in-parens> <media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed> So this is a media-not, that has a media-in-parens that is a media-feature. None of the browsers follow this behaviour though.
Created attachment 299080 [details] Simple test
https://github.com/w3c/csswg-drafts/issues/952
(spec co-editor here). This boils down to the fact that you only have support for the Media queries level 3 syntax, which unlike the level 4 syntax does not allow for arbitrary not/and/or nesting. I agree the level 4 syntax is much better (that's why we specified it), and hope you'll implement it. Also, note that there's a mistake in https://bugs.webkit.org/attachment.cgi?id=298806 : @media not(max-width: 700px) You need a space between not and the opening parenthesis, otherwise it gets parsed as a function token instead of the not keyword.
If I am not wrong, this is fixed by MQ4 landing and I can see "Simple Test" works fine in STP163 as well "Red and Blue" depending on window size. Can we close this now? Thanks!
Ok, thanks! *** This bug has been marked as a duplicate of bug 180234 ***