Can we have custom media queries, please?

Custom Media Queries: A Spec Without Momentum

Stefan Judis highlights that while the W3C spec for custom media queries exists, there is currently little momentum behind it. This stagnation is a missed opportunity, as front-end developers would almost certainly adopt the feature immediately upon release. Judis notes he would personally use it often, given how liberally he already relies on custom properties — the DRY benefits of custom properties would carry over directly to media queries.

The proposed syntax is simple:

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}
@media (--narrow-window) and (script) {
  /* special styles for when script is allowed */
}

Judis lifted this from the Chrome bug report, which you can star to show interest. He has also warmed up to postcss-preset-env, which can polyfill custom media queries alongside many other CSS features. He previously avoided it, fearing CSS polyfills were too theoretical — much of CSS cannot be polyfilled without JavaScript. Additionally, spec changes could lock you into a processor, as processing eventually stops and no longer delivers future features. However, the transformations postcss-preset-env handles are generally “chill” and provide real value, letting you choose the stage you’re comfortable with.