Description

Range syntax allows authors to write media (and container) queries using >, <, and = instead of multiple expressions of min- and max- prefixed media features.

/* classic queries with min- and max- prefixes */
@media screen and (min-width: 2023px) {
  /* yep, works */
}

/* queries using range syntax */
@media screen and (width >= 2023px) {
  /* yeah */
}

It is especially powerful when there are multiple conditions:

/* larger than phone, smaller than tablet */
@media screen and (428px < width < 744px) {}

Rationale

The new syntax will be a welcome addition to the platform; it improves readability and reduce complexity of the query.

People blogged about it:

• Better conditionals in CSS media queries with Range Syntax — Amit Merchant — A blog on PHP, JavaScript, and more
• Media Queries Level 4: Media Query Range Contexts (Media Query Ranges) – Bram.us

and got excited about it's (already) shipped in browsers.

• media query range syntax - Twitter Search / Twitter
• https://developer.chrome.com/blog/media-query-range-syntax/ - Twitter Search / Twitter

Yes, there are already some implementations for the feature:

• Firefox has had the simple syntax (with > 600px) since late 2018. Looks like complex ones (2021px <= width < 2023px) landed lately.
  • They haven't shipped container queries yet in release so I haven't checked if it's working
• Chrome has shipped both simple and complex ones in Chrome 104
• I don't see Safari supports it in media queries, but does in container queries

So, there are some interoperability issues; not great, but good for this project!

Since container queries are gaining traction, more people will start (again) writing query syntax. It would be so nice developers not forced to "downgrade" the query syntax to the classic ones.

Specification

https://w3c.github.io/csswg-drafts/mediaqueries-4/#mq-range-context

Tests

test:
http://wpt.live/css/mediaqueries/test_media_queries.html

wpt.fyi:
https://wpt.fyi/results/css/mediaqueries/test_media_queries.html?label=master&label=experimental&aligned&view=subtest

source:

• https://github.com/web-platform-tests/wpt/blob/4655ddb003a75dd1285192779318e38aecca306e/css/mediaqueries/test_media_queries.html#L135-L187
• https://github.com/web-platform-tests/wpt/blob/4655ddb003a75dd1285192779318e38aecca306e/css/mediaqueries/test_media_queries.html#L194-L262

Those tests only cover width, height, device-width, and device-height media features. Maybe it's nice to add resolution to the tests.