能否使用@supports检测CSS at-rule（如@property）的浏览器支持情况？

可以实现，但不能直接通过@supports检测@property这个at-rule本身，得通过间接验证其特性的方式来实现。

为什么你之前的写法无效？ #

• @supports的核心作用是检测**CSS声明（属性-值对）**的有效性，无法直接识别或检测@property这类at-rule。
• syntax是@property内部专属的描述符，不属于常规CSS属性，所以单独检测syntax: "<number>"也不生效。

可行的检测方案 #

利用@property的语法约束特性——支持它的浏览器会严格校验自定义属性的取值类型，而不支持的浏览器会把自定义属性当作无类型的普通变量，接受任何值。结合这一点可以写出准确的检测逻辑：

/* 1. 定义一个带语法约束的测试用@property */
@property --prop-test {
  syntax: "<number>"; /* 限定只能接受数字类型 */
  inherits: false;
  initial-value: 1;
}

/* 2. 利用@supports检测取值是否被语法约束限制 */
@supports not (--prop-test: "invalid-value") {
  /* 支持@property的浏览器会拒绝非数字值，因此该条件成立，隐藏提示横幅 */
  .unsupported-banner {
    display: none;
  }
}

逻辑说明 #

• 支持@property的浏览器：会识别--prop-test的数字类型约束，给它赋值字符串"invalid-value"属于无效声明，因此@supports (--prop-test: "invalid-value")返回false，加上not后条件成立，横幅被隐藏。
• 不支持@property的浏览器：会忽略@property规则，--prop-test就是普通自定义属性，接受任何值，因此@supports (--prop-test: "invalid-value")返回true，not后条件不成立，横幅保持显示。

内容的提问来源于stack exchange，提问作者Saltssaumure