Intent to Prototype: @custom-media

[Chromestatus]

Contact emails

moo...@google.com

Explainer

None

Specification

https://www.w3.org/TR/mediaqueries-5/#custom-mq

Summary

The proposed @custom-media at-rule is a feature that would allow developers to define and name their own media queries. This would make responsive design code cleaner and more maintainable by reducing repetition. For example: @custom-media --narrow-window (max-width: 30em); @media (--narrow-window) { /* styles for narrow windows */ }

Blink component

Blink>CSS

Motivation

The primary motivation for introducing the @custom-media feature is to enhance CSS development by making it more efficient, readable, and maintainable. It directly addresses the common issue of developers having to repeatedly write the same media query conditions, allowing them instead to define meaningful, reusable aliases. This feature is a feature highly requested by developers; the Chromium bug report has 233 stars, Chris Coyier and Stefan Judis have shared interest in this feature in their posts: https://www.stefanjudis.com/notes/can-we-have-custom-media-queries-please/, https://css-tricks.com/can-we-have-custom-media-queries-please/.

Initial public proposal

None

TAG review

None

TAG review status

Pending

Risks

Interoperability and Compatibility

None

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1275)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/533)

Web developers: Positive (https://issues.chromium.org/issues/40781325) 233 stars on bug report, few posts from web authors: https://www.stefanjudis.com/notes/can-we-have-custom-media-queries-please/ https://css-tricks.com/can-we-have-custom-media-queries-please/

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

None

Debuggability

None

Is this feature fully tested by web-platform-tests?

No

Flag name on about://flags

None

Finch feature name

None

Non-finch justification

None

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/40781325

Estimated milestones

No milestones specified

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5101681238605824?gate=5195524931846144

This intent message was generated by Chrome Platform Status.