浏览器支持 css 自定义属性的最低版本是 chrome 49、firefox 31、safari 9.1、edge 15+；ie 全系不支持且忽略 @supports，降级样式必须写在其外层；唯一合法检测写法是 @supports (color: var(--x))，css.supports() 需传入完整声明字符串如 '--theme-color: red'。
浏览器支持 CSS 自定义属性（即 --xxx）的最低门槛是 Chrome 49、Firefox 31、Safari 9.1、Edge 15+；IE 全系不支持，且不解析 @supports 规则——这意味着降级必须写在 @supports 外层，否则旧浏览器根本看不到。
@supports (color: var(--x)) 是唯一合法检测写法
不能用 @supports (--color: red)，因为 --color 不是规范属性，整条规则会被浏览器静默丢弃。真正要测的是 var() 函数能否被解析，所以必须把它放在标准属性的值位置上：
-
@supports (background-color: var(--primary))✅ 合法，--primary存不存在没关系，语法对就行 -
@supports (color: var(--theme, #000))❌ Safari ≤9.1 解析 fallback 语法失败，直接跳过整块 -
@supports (display: var(--layout))❌display不接受var()作为有效值，检测失效
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，所以它只执行外部样式；而 Safari 9–10.1 虽支持 var()，但不支持嵌套 var() 或 fallback 语法，降级需更保守：
- 所有现代样式（含
var(--x)）必须包进@supports块内 - 降级样式写在外面，用纯色值、
!important或更高 specificity 避免被覆盖 - 避免在降级中使用
gap、aspect-ratio等 IE 不认的属性 - 示例：
.btn { background-color: #007bff; }<br>@supports (color: var(--x)) {<br> .btn { background-color: var(--primary-color, #007bff); }<br>}
最易被忽略的一点：即使 @supports 返回 true，也不代表变量已注入或可读——比如主题 JS 没执行完、CSS 文件加载顺序错乱、或变量在 :root 外定义导致作用域失效。关键逻辑（如主题切换）必须配合运行时验证，不能只靠声明检测。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
