唯一可靠检测@property的方式是@supports selector(:--foo)，必须严格遵循无空格、单冒号、单伪类格式；JS中需用setProperty注册后通过getComputedStyle验证，且确保@property已加载并生效。
@property必须配合@supports selector()检测
直接写@supports (--foo: 0)或@supports (color: red)都检测不了@property，因为@property不是CSS声明，而是CSSOM级别的注册语法，浏览器根本不把它当“属性值对”来解析。唯一可靠路径是用@supports selector()查:--foo这类自定义伪类是否被识别——这是目前所有支持@property的引擎（Chrome 125+、Safari 17.4+、Firefox 122+）实际暴露的底层信号。
@supports selector(:--x)才是正解，但写法极敏感
必须严格按以下格式写，任何偏差都会让整个@supports块被静默丢弃：
-
@supports selector(:--test)✅ 最小可行写法，括号紧贴selector关键字，冒号和伪类名之间**不能有空格** -
@supports selector(:--test) and (color: var(--test))✅ 可叠加验证变量消费能力 -
@supports selector( :--test )❌ 冒号前多空格，Safari 17.4 直接忽略整条规则 -
@supports selector(::--test)❌ 多一个冒号，语法非法 -
@supports selector(:--test, :--other)⚠️ 逻辑上合法，但旧 Safari（17.3及更早）会返回false，建议单测
JS中用CSS.supports()检测要绕开双参数陷阱
CSS.supports()不支持selector()函数，所以不能照搬CSS写法。正确姿势是退到间接验证：
- 先确认
typeof CSS.supports === 'function'，IE和老安卓WebView直接跳过 - 用
CSS.supports('color', 'var(--x)')测试var()解析能力（注意：不是--x: y） - 再用
document.createElement('div').style.setProperty尝试注册--x并检查是否无报错（部分Android WebView对setProperty返回undefined） - 最终实测：
getComputedStyle(el).getPropertyValue('--x') !== ''比任何API都可信
真正容易被忽略的是作用域和注册时机
@property注册后只对后续声明生效，且仅在同源样式表中有效。常见失效不是检测失败，而是：
立即学习“前端免费学习笔记（深入）”；
- 把
@property写在@supports块内部——浏览器先解析@supports，此时@property还没注册，selector(:--x)自然查不到 - 在
link[rel=stylesheet]加载完成前就执行JS检测——getPropertyValue读到空字符串，误判为不支持 - 用
document.styleSheets动态插入@property时未触发CSSOM重排，导致selector(:--x)始终返回false
验证前务必确保@property已存在于document.styleSheets中，且目标元素已挂载。
