[mediaqueries] Should a top-level not be evaluated as a <media-not> if possible?

[grorg]

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.

However, none of the browsers implement this. I expect because they treat the "not" as the prefix to a <media-type>, and then decide that the type is invalid.

[grorg]

WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=167031

It seems a bit silly that you can't write something like this:

@media not (prefers-reduced-motion) {}

[grorg]

Check out the Simple Test on the webkit bug.

[frivoal]

However, none of the browsers implement this. I expect because they treat the "not" as the prefix to a , and then decide that the type is invalid.

Well, I'd phrase this differently. none of the browsers implement this because what they implement is Media queries level 3, which had a much simpler grammar without the full boolean logic:
https://drafts.csswg.org/mediaqueries-3/#syntax

It seems a bit silly that you can't write something like this:
@media not (prefers-reduced-motion) {}

Yes, it would be great if we could do that, which is why the spec says you can. But this ability to do generic logic with arbitrary and/or/not and not having to involve media types is new in Media queries 4.

As far as I can tell, the action item is on you (and other vendors) to actually implement this new generalized syntax. You may be able to reuse a good chunk of what you already implemented for @supports, since that's very similar.

[grorg]

Cool. In which case I'll implement this 😄

[frivoal]

Awesome.