The Media Queries Level 4 draft allows a slightly different syntax for media features than cq-prolyfill. Using the same syntax as media queries would be more consistent and thus easier to reason about for CSS authors.

The current syntax would still be valid for simple queries e.g. width > 100px, but more variants would be possible like min-width: 100px, text-align: right or even 100px < width.

Queries with two comparisons would change from width > 100px < 200px to the range syntax of the specification 100px < width < 200px or 200px > width > 100px.

The color filters would be changed to a suffix so color lightness <= 20% gets color-lightness <= 20% or max-color-lightness: 20%.

The biggest difference is that media queries don’t allow the not-equal (!=) comparision, so :container(text-align != right) would become :not(:container(text-align = right)) or :not(:container(text-align: right)).

Are the benefits of this enough to justify another change to the syntax of cq-prolyfill? (+1 or -1 comments are welcome too :)

Using the same syntax as media queries would be more consistent and thus easier to reason about for CSS authors.

I agree the CQ syntax should be as close as possible to the MQ syntax. Even identical if possible in my opinion.

+1 for following the MQ syntax

So, not many responses here, but so far the consensus is to change the syntax. Any thoughts on going forward?

I think you are right, we should change the syntax as suggested.

Any thoughts on going forward?

As soon as I’ve got time, I will work on it :)

Implemented in version 0.4.0.