Media Queries Level 4 Syntax & Evaluation

Category: CSS
Type: Chromium catches up
Status: Enabled by default (Chrome 104)
Intent stage: Prepare to ship

Breaking change: No
Enterprise impact: None
Chromium flag: CSSMediaQueries4
Spec maturity: Working draft
Web Platform Tests: No

WPT details: The existing WPTs are not sufficient at the moment - I will complete the coverage before shipping. Also some changes to existing tests will be required in relation to the <general-enclosed> handling.

Summary

Allows writing media queries using ordinary mathematical comparison operators, and adds support for 'or', 'not', nesting, and evaluation of "unknown" features.

Standards & signals

Specification: https://www.w3.org/TR/mediaqueries-4/#mq-range-context
Firefox: Shipped/Shipping — Partial support. Lacks support for `<general-enclosed>` and the `<mf-value> <mf-comparison> <mf-name>` form.
Safari: No signal
Web developers: No signals
Tracking bug: https://bugs.chromium.org/p/chromium/issues/detail?id=962417

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=media-queries-level-4-syntax-evaluation
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+Media%20Queries%20Level%204%20Syntax%20%26%20Evaluation
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=Media%20Queries%20Level%204%20Syntax%20%26%20Evaluation
Baseline status: https://webstatus.dev/?q=Media%20Queries%20Level%204%20Syntax%20%26%20Evaluation

View on chromestatus.com