Bug 167031 - Media Query should allow negation for media feature when media type is not specified
Summary: Media Query should allow negation for media feature when media type is not sp...
Status: RESOLVED DUPLICATE of bug 180234
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2017-01-13 16:11 PST by Aaron Chu
Modified: 2023-02-21 07:20 PST (History)
8 users (show)

See Also:

reduced test case (407 bytes, text/html)
2017-01-13 16:11 PST, Aaron Chu
no flags Details
Simple test (275 bytes, text/html)
2017-01-17 16:21 PST, Dean Jackson
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Aaron Chu 2017-01-13 16:11:32 PST
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.

Syntax, BNF

Combining Media Features
Comment 1 Radar WebKit Bug Importer 2017-01-13 16:14:34 PST
Comment 2 Dean Jackson 2017-01-17 16:20:37 PST
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.
Comment 3 Dean Jackson 2017-01-17 16:21:15 PST
Created attachment 299080 [details]
Simple test
Comment 4 Dean Jackson 2017-01-17 16:36:05 PST
Comment 5 Florian Rivoal 2017-01-18 05:55:25 PST
(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.
Comment 6 Ahmad Saleem 2023-02-20 15:44:51 PST
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!
Comment 7 Antti Koivisto 2023-02-21 07:20:56 PST
Ok, thanks!

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