Contact emails
moon...@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.

-- 
You received this message because you are subscribed to the Google Groups 
"blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to blink-dev+unsubscr...@chromium.org.
To view this discussion visit 
https://groups.google.com/a/chromium.org/d/msgid/blink-dev/68821b30.2b0a0220.24054f.00a6.GAE%40google.com.

Reply via email to