Intent to Ship: at-rule: CSS Feature Detection

[Kevin Babbitt]

Note: This feature is a bit unusual in that it was implemented behind a flag but not advertised on blink-dev with an I2P or dev trial announcement. I picked it up after initial implementation, got clarity on some open spec issues, and adjusted the implementation to match CSSWG resolutions.

Contact emails

kbab...@microsoft.com

Explainer

https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/AtRuleFeatureDetection/explainer.md

Specification

https://drafts.csswg.org/css-conditional-5/#support-definition-at-rules

Summary

This feature adds an `at-rule()` function to CSS `@supports` which enables authors to feature-detect support for CSS at-rules.

Blink component

Blink>CSS

Web Feature ID

supports-at-rule

Motivation

Feature detection is a W3C TAG design principle and a tool that Web authors rely on for graceful degradation of their pages. Currently, the only way for web developers to detect support for CSS at-rules is to use JavaScript. This feature allows at-rule support to be detected using the same `@supports` feature used to detect support for CSS properties.

Initial public proposal

https://github.com/w3c/csswg-drafts/issues/2463

TAG review

https://github.com/w3ctag/design-reviews/issues/1176

TAG review status

Issues addressed

Goals for experimentation

None

Risks

Interoperability and Compatibility

Minimal risks; this feature is purely additive.

Gecko: No signal (https://github.com/mozilla/standards-positions/issues/1310)

WebKit: No signal (https://github.com/WebKit/standards-positions/issues/565)

Web developers: Positive There have been several requests for this feature; some examples: https://github.com/w3c/csswg-drafts/issues/9743 https://ruhr.social/@nilsbinder/112721678680237204 https://mastodon.social/@xro/113106213499516093 https://bsky.app/profile/badrihippo.fosstodon.org.ap.brid.gy/post/3m6vupwqhbkk2

Other signals:

WebView application risks

Does this intent deprecate or change behavior of existing APIs, such that it has potentially high risk for Android WebView-based applications?

N/A

Debuggability

Exposure in Dev Tools is the same as for existing `@supports` rules.

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, ChromeOS, Android, and Android WebView)?

Yes

Is this feature fully tested by web-platform-tests?

Yes
https://wpt.fyi/results/css/css-conditional/js/supports-at-rule.html?label=experimental&label=master&aligned

Flag name on about://flags

enable-experimental-web-platform-features

Finch feature name

CSSSupportsAtRuleFunction

Rollout plan

Will ship enabled for all users

Requires code in //chrome?

False

Tracking bug

https://issues.chromium.org/issues/40211832

Estimated milestones

Shipping on desktop	148
DevTrial on desktop	143
Shipping on Android	148
DevTrial on Android	143
Shipping on WebView	148

Anticipated spec changes

Open questions about a feature may be a source of future web compat or interop issues. Please list open issues (e.g. links to known github issues in the project for the feature specification) whose resolution may introduce web compat/interop risk (e.g., changing to naming or structure of the API in a non-backward-compatible way).

No known open issues on `@supports at-rule()` itself. There were some expansions to the feature discussed to test for certain descriptors or context, but the CSSWG resolved to separate these more detailed queries out to a separate feature `@supports-condition`; see discussion at https://github.com/w3c/csswg-drafts/issues/12622.

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5110744177836032?gate=4696535686316032

This intent message was generated by Chrome Platform Status.