Open Props @custom-media Recipes | CSS-Tricks

"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: no-preference); @media (--motionOK) { /* animations and transitions */ } Direct Link →"

Firefox Nightly has added support for the @custom-media at-rule, currently available behind a feature flag. The @custom-media rule enables developers to define reusable aliases that represent complex media queries, reducing repetition and easing recall. Aliases can replace verbose expressions such as @media screen and (prefers-reduced-motion: no-preference), making stylesheet rules shorter and clearer. Collections of ready-made aliases accelerate adoption, with the Open Props project offering more than 45 predefined custom-media aliases. One practical alias example maps --motionOK to (prefers-reduced-motion: no-preference) for animation and transition rules.

Read at CSS-Tricks