Intent to Prototype: CSS at-rule() function for @supports

[Sajid Anwar]

Summary:
The CSS at-rule() function for the @supports at-rule allows authors to detect browser support of specific at-rules. It can also be used with the CSS.supports() JavaScript method as well as in the supports() function of the @import at-rule. Together, these allow authors to conditionally write styles or execute code depending on browser support for specific at-rules. For example:

  /* Conditional styles */
  @supports at-rule(@scope) {
    @scope { /* ... */ }
  }
  
  /* Conditional import */
  @import "props.css" supports(at-rule(@property));
  
  /* Feature detection in JavaScript */
  if (CSS.supports("at-rule(@view-transition)")) { }

We intend to enable these functions in Firefox Nightly builds behind the layout.css.supports.at-rule.enabled pref.

Bug: 
Bug 1751188 - Implement at-rule for use with @supports

Specification: 
https://drafts.csswg.org/css-conditional-5/#funcdef-supports-at-rule

Standards Body: 
CSSWG / W3C

Platform Coverage: 
All

Preference:
layout.css.supports.at-rule.enabled — Bug 2060754 to implement and enable in Nightly

DevTools Bug: 
N/A (supported by default in the at-rules panel of the Style Editor)

Extensions Bug: 
N/A

Use Counter: 
N/A

Standards-Positions Discussion: 
https://github.com/mozilla/standards-positions/issues/1310 — (no position)

Other Browsers:
- Blink: Shipped since Chrome 148
- WebKit: Implementation in progress (https://bugs.webkit.org/show_bug.cgi?id=235400)

web-platform-tests:
https://wpt.fyi/results/css/css-conditional/js/supports-at-rule.html — Also adding an additional WPT file to test serialization of the at-rule() function.