Detect at-rule support in CSS with @supports at-rule(@keyword)

Back in January 2022, I wrote about an exciting new CSS Working Group decision: a function to detect at-rule support using @supports at-rule(@keyword). Fast forward to today, and the CSS Conditional Rules Module Level 5 specification has solidified how this feature works and Chromium (Chrome, Edge, etc.) is about to ship it in Chromium 148!

~

The solution (Updated)

The core idea remains the same as back in 2022: use the at-rule() function within an @supports query to check if a user agent recognizes a specific at-rule.

@supports at-rule(@starting-style) { }

The function simply checks if the browser would accept an at-rule in any context. This is super useful for detecting entire new features like @starting-style.

You can also use at-rule() in the supports-condition when doing an @import:

@import "view-transitions.css" supports(at-rule(@view-transition));

~

No descriptors, preludes, or full blocks!

In my original coverage of at-rule(), I mentioned an extension to the feature that would theoretically allow you to detect support for specific descriptors (e.g. at-rule(@counter-style; system: fixed)) or even pass in a full at-rule block.

This extension — along with checking for at-rule preludes (= the part between the at-rule and the opening {) — has been dropped. The following examples will all fail, as those are not supported:

@supports at-rule(@counter-style; system: fixed) { … } @supports at-rule(@counter-style { system: fixed }) { … } @supports at-rule(@container style(…)) { … }

Because preludes are not allowed in at-rule(), it cannot be used to detect non-size @container queries support (e.g. style queries, anchored queries, etc.). To detect those, fall back to sniffing out support for the various values of container-type — a technique you can already use today in all browsers:

@supports (container-type: anchored) { }

Note that you also can’t pass @charset into at-rule(), as it technically is not an at-rule.

~

Browser Support

@supports at-rule(@keyword) is available in Chromium 148. The initial implementation was done by Google and Kevin from Microsoft pushed it over the finish line while also navigation the paperwork with the CSS Working Group.

Chromium (Blink)

✅ Supported in Chromium 148 and up.

Firefox (Gecko)

❌ No support

Follow Issue #1751188 to stay up-to-date and signal interest.

Safari (WebKit)

❌ No support

Subscribe to Issue #235400 to stay up-to-date and signal interest.

~

Feature Detection

You can feature detect support for at-rule() by checking for support for @supports itself.

@supports at-rule(@supports) { }

You can see it in action in the following demo:

~