What the hell’s up with @media not?

What the hell’s up with @media not?:
Currently I’m working on a media query test suite, and I’ve run into one of those weird things: the proper syntax of @media not.

Note that I’m only interested in the @media syntax. I cannot use the rest because I can’t fit it into my test suite.

I’m currently working on a test for binary media queries such as touch, script, grid, and a few others. These are just meant to tell you if the browser is in a touch environment, supports JavaScript, or is on a terminal-type screen. Now touch and script don’t work (yet), but grid does.

Test it here: the grid media query is supported but returns false in all browsers. That’s because normal browsers are not on a terminal-type grid screen. This is all as it should be.

I’m using these media queries

@media (grid: 0) {styles}
@media (grid: 1) {styles}

They work in all browsers: all of them properly report that they support the grid media query, and that its value is 0.

Still, I’d prefer to do this:

@media (grid) {styles}
@media not (grid) {styles}

Tough luck: the second media query does not work. At all. In any browser whatsoever.

What?

The?

Fuck?

But wait, it gets worse. What I eventually want to do is use this media query to test bare support for grid:

@media (grid),not (grid) {styles}

The styles would be applied if grid is either true or false; if grid is supported, in other words.

This does not work in IE10, Firefox, Safari, and Opera. It works, however, in Chrome. You know you’re in for a world of pain if the WebKit-based browsers disagree with each other. You know it’s going to be even worse when they disagree on desktop.

Here is a test page where you can see for yourself. I also tried (not grid) instead of not (grid), but that doesn’t work, either.

What the HELL is going on? What is the proper syntax of @media not (grid)? Why is the last example supported by Chrome, but not any of the other browsers?

Help!

Update: OK, some light in the darkness. The reason that Chrome supports the last test is that it runs WebKit 537, contrary to Safari, which runs 536. 537 is thus slightly better than 536, but still not nearly good enough.

Second update: It was the brackets. @media not (grid) does not work; @media not grid does.

Final update: A test page for all these complicated differences.

DIGITAL JUICE