The @custom-media at-rule has landed in Firefox Nightly! I couldn’t discover it within the launch notes however Adam Argyle’s on the beat noting that it’s behind a flag for now.
format.css.custom-media.enabledI usually overlook the precise identify of an @media question or just get drained writing one thing like @media display and (prefers-reduced-motion: no-preference) again and again. @custom-media will likely be a pleasant little bit of aid to the ol’ muscle reminiscence as a result of it permits us to create aliases for queries.
In reality, Adam’s Open Props undertaking has greater than 45 of them that make for wonderful recipes:
@custom-media --motionOK (prefers-reduced-motion: no-preference);
@media (--motionOK) {
/* animations and transitions */
}
