css自定义属性无法用@supports(--color:red)检测，因--xxx非标准属性；应使用@supports(color:var(--x))检测var()函数支持。
CSS 自定义属性（即 CSS 变量）本身无法被 @supports 直接检测——你不能写 @supports (--color: red)，这语法无效，整条规则会被浏览器静默丢弃。
为什么 @supports (--var: value) 在 CSS 里不合法
CSS 规范中，@supports 的条件必须是「可声明、可解析、可应用」的完整属性-值对，且该对必须属于标准 CSS 属性范畴。自定义属性（--xxx）不是标准属性，它只是声明容器，不参与渲染逻辑判断。浏览器解析时会直接跳过这种写法，不报错也不执行。
常见错误现象：@supports (--theme-color: blue) { .btn { color: var(--theme-color); } } 在所有浏览器中都无效，样式块不会被应用。
- 正确思路：检测的是「使用变量的能力」，而不是「声明变量的能力」
- 真正要测的是
color: var(--x)这种用法是否被支持 - 值部分可以是任意合法变量名，甚至不存在的
--_也没关系，只要语法格式对
应该用 @supports (color: var(--x))
这是目前最可靠、兼容性最好的检测方式。它测试的是浏览器能否识别并解析 var() 函数在标准属性值中的使用，覆盖了 IE 不支持、旧 Safari（≤9.1）、部分安卓 WebView 等典型不支持场景。
示例：
/* 降级样式 */
.button {
background-color: #007bff;
}
<p>/<em> 现代样式（仅支持 var() 的浏览器生效） </em>/
@supports (color: var(--x)) {
.button {
background-color: var(--primary-color, #007bff);
}
}</p>
- Chrome 49+、Firefox 31+、Safari 9.1+、Edge 16+ 都支持该写法
- IE 完全不识别
@supports，自动跳过整个块，天然 fallback - 不要写成
@supports (color: var(--x, #000))——带 fallback 值的写法在部分旧引擎中解析失败
CSS.supports() 检测自定义属性的坑
JS 中调用 CSS.supports() 检测变量支持，同样不能传 --x 单独作为参数，也不能加括号包裹声明。
- ✅ 正确：
CSS.supports('color', 'var(--x)')或更推荐的单参数形式CSS.supports('color: var(--x)') - ❌ 错误：
CSS.supports('--x: red')（返回false，语义错） - ❌ 错误：
CSS.supports('(color: var(--x))')（括号多余，Safari 16.4–17.3 返回false） - ⚠️ 注意：
CSS.supports()在 IE 中完全不存在，使用前需先检测typeof CSS.supports === 'function'
真正需要兜底的场景：老 Android WebView 和 Safari 9
即使 @supports (color: var(--x)) 返回 true，某些安卓 4.4 WebView 或 Safari 9.0 仍可能忽略 var() 值（尤其嵌套或作用域复杂时）。这时仅靠 @supports 不够。
- 必须配合
var(--x, fallback)写法，确保未解析变量时有降级值 - 避免在关键布局中依赖多层变量计算，如
calc(var(--a) + var(--b))，旧引擎易失效 - 若需精确控制，可用 JS 检测后动态写
style标签，但应作为最后手段——破坏了纯 CSS 渐进增强的简洁性
最常被忽略的一点：自定义属性的支持与否，和 :root 是否声明、变量是否拼写一致、大小写是否敏感完全无关；@supports 测的是语法解析能力，不是运行时值有效性。别在条件里写真实变量名，用占位符即可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
