The @custom-media At-Rule Lands in Firefox Nightly

The @custom-media At-Rule

The @custom-media at-rule has been implemented in Firefox Nightly, currently behind a flag, offering a way to define named media queries. This feature addresses the common issue of repeating verbose media query syntax throughout a stylesheet, improving maintainability and readability.

Why This Matters

Current CSS development often requires repeating lengthy media query expressions, leading to potential errors and increased code size. While existing preprocessors offer similar functionality, native browser support for @custom-media eliminates the need for build steps and improves performance by reducing parsing overhead. The inefficiency of repetitive queries can impact larger projects, increasing maintenance costs and potentially slowing down development iteration.

Key Insights

• Firefox Nightly implementation: 2026-01-23
• Media query aliasing: @custom-media allows developers to define short, descriptive names for complex media queries.
• Open Props project: Offers over 45 pre-defined custom media queries for common use cases, streamlining development.

Working Example

@custom-media --motionOK (prefers-reduced-motion: no-preference);
@media (--motionOK) {
  /* animations and transitions */
  animation-duration: 0.5s;
  transition: all 0.2s ease-in-out;
}

@custom-media --dark-theme (prefers-color-scheme: dark);
@media (--dark-theme) {
  background-color: #333;
  color: #fff;
}

Practical Applications

• Large-scale projects: Teams can standardize media query names across a codebase for consistency.
• Accessibility: Easily toggle animations and transitions based on prefers-reduced-motion with a clear alias.

References:

• https://css-tricks.com/open-props-custom-media-recipes/