Custom Media Queries

[ramiy]

Description

The Media Queries Level 5 specification defines “Custom Media Queries” as named aliases for longer and more complex media queries. With custom media queries developers define them once and use them in multiple places, simplifying the process of updating the media query to a single line of code.

Example:

@custom-media --desktop (max-width: 70em);
@custom-media --mobile (max-width: 40em);

@media screen and (--desktop) {
  /* styles */
}
@media screen and (--mobile) {
  /* styles */
}
@media print and (--desktop) {
  /* styles */
}
@media print and (--mobile) {
  /* styles */
}

Furthermore, with the help of JS CSS.customMedia.set(), developers will be able to change breakpoints dynamically.

Specification

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

Open Issues

No response

Tests

No response

Current Implementations

• Blink
• Gecko
• WebKit

Standards Positions

No response

Browser bug reports

https://bugs.chromium.org/p/chromium/issues/detail?id=1234172

Developer discussions

https://open-props.style/#media-queries

Polls & Surveys

No response

Existing Usage

No response

Workarounds

this can be emulated using style queries (#433):

@media (width <= 40em) {
  :root { --screen: mobile; }
}
@media (width <= 70em) {
  :root { --screen: desktop; }
}

@container style(--screen: mobile) {
  /* styles */
}

@container style(--screen: desktop) {
  /* styles */
}

Accessibility Impact

No accessibility impact.

Privacy Impact

No privacy impact.

[frehner]

Bug report for Mozilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=1744292

Bug report for WebKit:
https://bugs.webkit.org/show_bug.cgi?id=233820

[mayank99]

this can be emulated using style queries (#433):

@media (width <= 40em) {
  :root { --screen: mobile; }
}
@media (width <= 70em) {
  :root { --screen: desktop; }
}

@container style(--screen: mobile) {
  /* styles */
}

@container style(--screen: desktop) {
  /* styles */
}

[jensimmons]

Do you intend for this to include the script-based version of this? There is not spec for that yet. This proposal could be for the declarative version only, as your examples show. Correct?

[foolip]

Are there any tests for the declarative feature here in WPT already?

[foolip]

To answer my own questions, I did a search for "custom-media" in WPT and didn't find anything, so I guess there are no tests yet.

[wpt-interop]

Thank you for proposing Custom Media Queries for inclusion in Interop 2024.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

As of the deadline, the specifications for Custom Media Queries were not yet complete enough to allow interoperable implementations. To make progress on this area in the future, it will first be necessary to ensure that the feature has a clear specification in a standards track document.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2024!

Posted on behalf of the Interop team.