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) {
  /* CSS for browsers that support @starting-style here … */
}

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:

/* This CSS only gets imported when @view-transition is supported (and the browser supports at-rule() as well) */
@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:

/* ❌ Passing in descriptors is not supported */
@supports at-rule(@counter-style; system: fixed) { … }

/* ❌ Passing in full at-rules is not supported */
@supports at-rule(@counter-style { system: fixed }) { … }

/* ❌ Passing in preludes of at-rules is not supported */
@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) {
  /* CSS for browsers that support anchored queries here … */
}

To feature detect style queries — which has no tell-tale property/value pair — you can use this workaround I previously documented:

html {
  --sentinel: 1;
}

@container style(--sentinel: 1) {
  /* Style Queries Supported! */
}

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) {
  /* ✅ The browser supports `@supports at-rule(…)` */
}

You can see it in action in the following demo:

See the Pen
CSS @supports at-rule() test by Bramus (@bramus)
on CodePen.

~

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …) View more posts