支持 css 自定义属性的唯一可靠检测方式是 @supports (color: var(--theme))，降级样式必须写在 @supports 外层且语法兼容 ie；css.supports() 必须传完整声明字符串如 '--theme-color: red'。
不支持 CSS 自定义属性（--xxx）的浏览器会直接忽略含 var(--x) 的整条声明，但不会报错；降级必须写在 @supports 外层，且不能依赖 JS 或动态注入——这是唯一可靠路径。
为什么 @supports (--color: red) 是错的
浏览器只认「标准属性 + var() 值」的组合语法，--color 本身不是 CSS 属性，整条规则会被静默丢弃。真正要测的是 var() 函数能否被解析，所以必须把它放在合法属性的值位置上：
-
@supports (color: var(--theme))✅ 合法，--theme存不存在不影响语法校验 -
@supports (color: var(--theme, #000))❌ Safari ≤9.1 解析 fallback 语法失败，跳过整块 -
@supports (--theme: red)❌ 所有浏览器都忽略，不是规范属性
CSS.supports() 检测必须传完整声明字符串
JS 中调用 CSS.supports() 是为了确认浏览器能否接受 --xxx: yyy 这种声明格式，不是查变量有没有赋值：
-
CSS.supports('--theme-color: red')✅ 必须带空格、冒号、值，缺一不可 -
CSS.supports('--theme-color')❌ 缺值，返回false -
CSS.supports('--theme-color', 'red')⚠️ Safari 16.4–17.3 返回false，务必用单参数字符串形式 -
CSS.supports('(--theme-color: red)')❌ Safari 16.4–17.3 加括号反而失效
降级样式必须写在 @supports 外部，且兼容 IE
IE 全系不支持 @supports，且完全忽略该规则块——这意味着它只会执行外部样式。如果把降级写在里面，IE 就看不到：
- ✅ 正确顺序：
.btn { background-color: #007bff; }（IE 能读）→ 再写@supports (color: var(--c)) { .btn { background-color: var(--c); } } - ❌ 错误写法：把
@supports块放在前面，fallback 放后面；部分旧 Chromium 和 WebView 会连 fallback 都跳过 - ⚠️ 注意：降级中避免使用
gap、aspect-ratio等 IE 不认的属性，否则整个声明可能失效
容易被忽略的 fallback 陷阱
很多人以为只要写了 var(--x, #fff) 就算降级，但 fallback 参数在 Safari 9–10.1 中根本无法解析，整条声明被跳过；真正的 fallback 必须是独立、前置、语法兼容的声明：
- 不要依赖
var(--x, #fff)在旧浏览器生效——Safari 9–10.1 会直接跳过整行 - 所有现代样式（含
var(--x)）必须包进@supports块内 - 降级颜色只能用
#rrggbb、rgb()、rgba()、hsl()、命名色；带透明度必须用rgba()，不能用 hex
最麻烦的不是检测逻辑，而是确保 fallback 样式在 IE、Android 4.4 WebView、微信 X5 内核等环境里真能被解析并应用——它们不支持 @supports，也不认识新颜色函数或布局属性，任何一处语法越界，整条声明就消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
