Range syntax for media/container queries

[myakura]

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.

[foolip]

Does the container queries bit of this overlap with #133?

[myakura]

Does the container queries bit of this overlap with #133?

Right. I found it is tested separately.
https://github.com/web-platform-tests/wpt/blob/master/css/css-contain/container-queries/at-container-parsing.html

The Containment spec defines <size-feature> to refer to the MQ spec, but I guess browsers handle them separately...?
Even so, I would like the syntax work both in media and container queries.

[gsnedders]

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

Note that web-platform-tests/wpt#35435 and w3c/csswg-drafts#7595 are open issues which heavily effect these test results.

[foolip]

There were some mentions of this feature in State of CSS 2022, although not enough to make the top list in #248. I can count 9 mentions, for example this one:

Range syntax in media queries (hard to polyfill, but will use it as soon as support is high enough)

[foolip]

In the MDN short survey on CSS & HTML, "CSS media queries range syntax (example: @media screen and (428px < width < 744px))" was the most popular choice by a fairly wide margin, selected by ~37% of survey takers.

[foolip]

Thank you for proposing range syntax for media/container queries for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as the Container Queries and Media Queries 4 focus areas. You can follow the progress of these Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.