The Future of CSS: Detect at-rule support with @supports at-rule(@keyword)

~

The problem

While working on my articles and demos that use @scroll-timeline, I ran into an issue: how do I feature detect support for this at-rule?

Thankfully I could use a workaround by checking for support of a “telltale” property: animation-timeline: Browsers that have implemented @scroll-timeline, also have implemented the animation-timeline property. By checking for animation-timeline‘s existence, we can feature detect support for @scroll-timeline.

@supports (animation-timeline: works) {
  /* @scroll-timeline compatible code here */ 
}

But detecting a telltale property isn’t always 100% accurate or possible. Take the wonderful @layer for example: that one doesn’t come with a telltale property. How do we detect support for it?

~

The solution

To solve this, the CSS Working Group just decided to introduce a new function that be used in conjunction with @supports: at-rule().

With it, we can feature detect at-rule support as follows:

@supports at-rule(@foo) {
  /* @foo is supported */
}

It’s also possible to detect support for certain descriptors. For @scroll-timeline this will come in handy, as the descriptors changed over time.

@supports at-rule(@foo; desc: val) {
  /* @foo is supported. The descriptor `desc` with value `val` parses as part of that at-rule. */
}

Winging back to detect support for @layer, the CSS would look like this:

@supports at-rule(@layer) {
  /* @layer is supported */
}

~

The solution, bis

Apart from the syntax above, there’s a follow-up issue that will allow you to pass in a full at-rule into at-rule():

@supports at-rule(@foo bar {baz: qux}) {
  /* The entire at-rule with all its descriptors is supported. Unknown descriptors are ignored. */
}

Note that in this form you’ll have to pass in a valid — thus, complete — at-rule.

~

Browser Support

This is hot off the press. Currently, no browser supports this. I’ve filed issues at all browser engines to add support for this:

• WebKit/Safari: Issue #235400
• Gecko/Firefox: Issue #1751188
• Blink/Chromium: Issue #1289224

~

To help spread the contents of this post, feel free to retweet the announcement tweet:

The Future of CSS: Detect at-rule support with
`@​ supports at-rule(@​keyword)`

🔗 https://t.co/605iKCzZ62#CSS #FeatureDetection pic.twitter.com/2lwqQIR2wF

— Bram.us (@bramusblog) January 20, 2022

~