• Firefox Nightly now supports @custom-media, enabling developers to alias complex media queries. • Open Props offers 45+ ready‑made @custom-media aliases for common design patterns. • Example: @custom-media –motionOK (prefers-reduced-motion: no-preference) simplifies animation toggles. • Feature flagged in Firefox 146, still requires enabling flag for full use. • Browser adoption lagged; hope Chrome and Safari follow soon for broader support. • Alternatives include querying :root‑scoped custom properties or using Fylgja CSS Tokens.

Article Summaries:

  • The @custom-media at-rule has landed in Firefox Nightly! I couldn’t find it in the release notes but Adam Argyle’s on the beat noting that it’s behind a flag for now. I often forget the exact name of an @media query or simply get tired writing something like @media screen and (prefers-reduced-motion: no-preference) over and over again. @custom-media will be a nice bit of relief to the ol’ muscle memory because it allows us to create aliases for queries. In fact, Adam’s Open Props project has more than 45 of them that make for excellent recipes: @custom-media –motionOK (prefers-reduced-motion:

Sources: