Firefox 157 Beta makes CSS at-rule feature detection easier

Firefox 157 is currently in Beta and is scheduled to ship on September 29, 2026. Its CSS release notes call out a small but useful addition: the at-rule() function can now be used inside @supports to ask whether a browser accepts a particular at-rule, with @scope shown as the example. The same function is available in the supports() condition of @import.

A capability check that matches the thing you want to use

Most feature queries test a declaration, such as (display: grid), or a selector with selector(). That works well when the enhancement is a property or selector. It is less direct when the feature you need is an entire at-rule. at-rule() fills that gap by making the question explicit: can this CSS processor accept @scope, @layer, or another named rule in the context where it will be used?

That distinction is useful for component authors. A declaration test can tell you that a browser understands one property, but it cannot by itself prove that a complete rule structure is safe to parse. Testing the at-rule keeps the guard close to the syntax it protects and makes the intent easier to review in a design-system stylesheet.

The smallest safe pattern

@supports at-rule(@scope) {
  @scope (.card) {
    .title { text-wrap: balance; }
  }
}

The important part is not the novelty of the nested rule; it is the fallback boundary. Write the baseline styles outside the query so older browsers still receive valid CSS. Put only the enhancement inside the guarded block. If a browser does not recognize the at-rule() condition, the block is skipped and the baseline remains in place.

Why the Beta label matters

MDN describes Firefox 157 as the current Beta and notes that the release page is still a work in progress. That makes the feature worth prototyping, not a reason to remove a fallback. The browser release channel, the at-rule you test, and the rest of the rule body should all be part of your compatibility review before the pattern reaches a production component library.

The CSS Conditional Rules Level 5 Working Draft defines the grammar as at-rule(<at-keyword-token>) and says a processor supports an at-rule when it would accept that rule beginning with the specified at-keyword in any context. The specification is still a Working Draft, so its definition is useful context rather than a promise that every engine will ship the same behavior on the same schedule.

A practical rollout checklist

Start by identifying an enhancement that genuinely depends on an at-rule. Add a normal fallback first, then wrap the smallest possible block in @supports at-rule(). Test the fallback in a browser that does not implement the query, test the enhanced path in Firefox Beta, and inspect parsing behavior in your other target engines. Keep the feature query near the enhancement instead of hiding it in a distant utility file.

For @scope specifically, check that the scoped selector boundary solves a real ownership problem: reducing selector leakage, clarifying component boundaries, or making a reusable pattern easier to compose. If it does not improve one of those outcomes, the feature query is unnecessary ceremony. If it does, the query gives the progressive enhancement a clear, reviewable seam.

What CSS authors should do next

Treat at-rule() as a capability probe that lets your stylesheet describe its assumptions more accurately. Keep the default experience resilient, isolate the newer syntax, and record which browser channels you used for testing. As Firefox 157 moves from Beta to release and other engines publish their positions, revisit the guard rather than assuming that a single implementation settles interoperability.

The near-term win is clarity. Teams can experiment with @scope and other emerging at-rules without turning an early implementation into a hard requirement. A small, explicit feature query lets the browser choose the enhanced path while the baseline remains useful for everyone else.

Sources

Primary source: MDN Web Docs, “Firefox 157 release notes for developers (Beta),” updated September 24, 2026. Standards context: W3C CSS Conditional Rules Module Level 5, Working Draft dated June 30, 2026.