Bug 167031 – Media Query should allow negation for media feature when media type is not specified

• Component: CSS
• Status: RESOLVED DUPLICATE

[Aaron Chu]

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

[Radar WebKit Bug Importer]

<rdar://problem/30022550>

[Dean Jackson]

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.

[Dean Jackson]

Created attachment 299080 [details]
Simple test

[Dean Jackson]

https://github.com/w3c/csswg-drafts/issues/952

[Florian Rivoal]

(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.

[Ahmad Saleem]

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!

[Antti Koivisto]

Ok, thanks!

*** This bug has been marked as a duplicate of bug 180234 ***