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: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 10
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2017-01-13 16:11 PST by Aaron Chu
Modified: 2017-01-18 05:55 PST (History)
4 users (show)

See Also:


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

specs:
Syntax, BNF
https://www.w3.org/TR/mediaqueries-4/#mq-syntax

Combining Media Features
https://www.w3.org/TR/mediaqueries-4/#media-conditions
Comment 1 Radar WebKit Bug Importer 2017-01-13 16:14:34 PST
<rdar://problem/30022550>
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
https://github.com/w3c/csswg-drafts/issues/952
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.