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.