Firefox Nightly just introduced a flag for CSS custom-media queries, and honestly, it’s about time. If you have spent any significant time building complex WordPress themes, you know the pain of repeating long media strings like (prefers-reduced-motion: no-preference) across a dozen different files. It is a recipe for maintenance debt and human error.
This new at-rule, part of the Media Queries Level 5 specification, allows us to define aliases for media queries. Instead of hardcoding breakpoints everywhere, we define them once and reuse them. While it’s currently hidden behind the layout.css.custom-media.enabled flag in Firefox, the implications for front-end architecture are massive.
The Problem with Traditional CSS custom-media Queries
We’ve been faking this functionality with Sass variables or PostCSS plugins for years. However, having native browser support means less processing overhead and better integration with other modern features like CSS Cascade Layers. Specifically, it eliminates the “copy-paste” workflow that leads to fragmented styles.
Look at how we currently handle repetitive accessibility queries. It is messy, verbose, and easy to break during a refactor.
/* The Naive, Repetitive Approach */
@media (prefers-reduced-motion: no-preference) {
.hero-animation {
animation: slideIn 1s ease;
}
}
@media (prefers-reduced-motion: no-preference) {
.button-hover {
transition: transform 0.2s;
}
}Enter Open Props and @custom-media Recipes
Adam Argyle’s Open Props project has been pushing the boundaries here for a while. They offer a library of over 45 pre-defined media queries that act as “recipes” for common UI states. By using CSS custom-media, your stylesheets become significantly more readable.
/* The Modern @custom-media Way */
@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --ipad (width <= 1024px);
@media (--motionOK) {
.hero-animation {
animation: slideIn 1s ease;
}
}
@media (--ipad) {
.sidebar {
display: none;
}
}This abstraction isn’t just “syntactic sugar.” It allows you to change a breakpoint in one place and have it propagate through the entire cascade. This is the same logic we use when dealing with Style Container Queries—moving logic away from hardcoded values and toward semantic definitions.
How to Use It Now (The Pragmatic Take)
Can you ship this today? Not without a build step. Even though MDN documents @custom-media, browser support is still in the “Nightly flag” stage. Furthermore, Safari and Chrome haven’t fully committed to the same timeline as Firefox.
However, you should start using this syntax via postcss-custom-media. It allows you to write future-proof CSS today that compiles down to standard media queries for legacy browsers. Consequently, when native support lands across the board, you just flip a switch in your build config and ship native code.
Look, if this CSS stuff is eating up your dev hours, let me handle it. I’ve been wrestling with WordPress since the 4.x days.
Architecting for the Future
The goal is always maintainability. Stop thinking about “desktop” and “mobile.” Start thinking about capabilities and aliases. Whether it’s --motionOK or --large-screen, CSS custom-media is the tool that finally brings sanity to our stylesheets. Ship it responsibly.
