The `@custom-media` at-rule has landed in Firefox Nightly! I couldn’t find it in the [release notes](https://www.firefox.com/en-US/firefox/149.0a1/releasenotes/) but [Adam Argyle’s on the beat](https://nerdy.dev/custom-media) noting that it’s behind a flag for now.

Look for `layout.css.custom-media.enabled`

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](https://github.com/argyleink/open-props/blob/main/src/props.media.css) that make for excellent recipes:

```
@custom-media --motionOK (prefers-reduced-motion: no-preference);

@media (--motionOK) {
/* animations and transitions */
}
```

---

[Open Props @custom-media Recipes](https://css-tricks.com/open-props-custom-media-recipes/) originally published on [CSS-Tricks](https://css-tricks.com), which is part of the [DigitalOcean](https://try.digitalocean.com/css-tricks/?utm%5Fmedium=rss&utm%5Fsource=css-tricks.com&utm%5Fcampaign=family%5F&utm%5Fcontent=) family. You should [get the newsletter](https://css-tricks.com/newsletters/).