The @custom-media at-rule has recently landed in Firefox Nightly. Although not explicitly detailed in the release notes, its presence has been noted, currently operating behind a feature flag as highlighted by Adam Argyle.
To activate this feature, users should locate and enable layout.css.custom-media.enabled.
Developers frequently encounter the challenge of repeatedly writing verbose media queries, such as @media screen and (prefers-reduced-motion: no-preference). The @custom-media rule provides a welcome solution by enabling the creation of concise aliases for these queries, thereby improving code maintainability and reducing repetitive typing.
Adam Argyle’s Open Props project effectively demonstrates the utility of this new feature. It offers over 45 custom media definitions, serving as excellent recipes for various design scenarios:
@custom-media --motionOK (prefers-reduced-motion: no-preference);
@media (--motionOK) {
/* animations and transitions */
}