UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0

Steps to reproduce the problem:
CSS Media Quries Level 4 bring in a bunch of syntactic improvements. They make media queries much more readable and maintainable.

https://drafts.csswg.org/mediaqueries-4/#mq-syntax

Here's an example:

Before:

@media (min-width: 20em), not all and (min-height: 40em) {
  @media not all and (pointer: none) {
    …
  }
}

After:

@media ((width >= 20em) or (height < 40em)) and (pointer) {
  …
}

What is the expected behavior?

What went wrong?

Did this work before? No 

Does this work in other browsers? N/A

Chrome version: <Copy from: 'about:version'>  Channel: n/a
OS Version: OS X 10.12
Flash Version: