Open Props @custom-media Recipes | CSS-Methods

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.

I 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 */
}

Direct Hyperlink →