使用 @supports at-rule(@keyword) 检测 CSS 中的 at-rule 支持
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!
早在2022年1月，我写道了一个激动人心的CSS Working Group新决定：使用@supports at-rule(@keyword)检测at-rule支持的函数。快进到今天，CSS Conditional Rules Module Level 5规范已经巩固了这个功能的工作方式，并且Chromium（Chrome、Edge等）即将于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.
核心思想与 2022 年时相同：在 @supports 查询中使用 at-rule() 函数来检查用户代理是否识别特定的 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.
该函数简单地检查浏览器是否会在任何上下文中接受 at-rule。这对于检测像 @starting-style 这样的全新功能非常有用。
You can also use at-rule() in the supports-condition when doing an @import:
您也可以在使用 @import 时，在 supports-condition 中使用 at-rule()：
@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.
在我的 对 at-rule() 的原始报道 中，我提到了该功能的一个扩展，该扩展理论上允许您检测特定描述符的支持（例如 at-rule(@counter-style; system: fixed)），甚至传入完整的 at-rule 块。
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:
此扩展 — 以及检查 at-rule preludes（= at-rule 和开括号 { 之间的部分）— 已被删除。以下示例都将失败，因为它们不受支持：
@supports at-rule(@counter-style; system: fixed) { … } @supports at-rule(@counter-style { system: ...