ie11及更早版本完全不识别var()语法，整条css声明被静默丢弃，既不解析括号内容也不取后备值；chrome49+、firefox31+、safari9.1+、edge15+原生支持，但safari9.0–9.2存在动态更新bug，稳定起点为safari9.3；@supports(color:var(--_))是唯一合法检测方式。
IE11 及更早版本完全不识别 var() 语法，整条 CSS 声明会被静默丢弃——不是“取后备值”，而是直接跳过，连括号里的内容都不会解析。
IE11 中 var() 的真实行为是什么
它和写 color: nonsense(--x) 效果一样：无效、无声、无日志。比如 color: var(--text, #333) 在 IE11 里等价于这行代码不存在，最终取继承值或初始值（color 变成黑色）。很多人误以为逗号后的后备值能兜底，其实 var(--x, #fff) 这种语法本身就不被 IE 解析，根本进不了词法分析阶段。
现代浏览器支持情况与关键分水岭
Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+ 原生支持 var()；但 Safari 9.0 和 iOS Safari 9.0–9.2 存在严重 bug：动态修改 :root 变量后，部分子元素样式不会更新（尤其是嵌套 var() 或配合 @media 时）。真正稳定可用的起点是 Safari 9.3 / iOS 9.3。
-
@supports (color: var(--_))是唯一合法的检测方式，所有现代浏览器都支持该语法 -
@supports (--x: red)是非法写法，所有浏览器都会忽略整条规则 - 注意：
@supports自身在 IE11 中不支持，只能用于包裹增强逻辑，不能替代静态兜底
PostCSS 构建时替换的局限性
postcss-custom-properties 这类插件只处理同一 CSS 文件内、静态写出的 :root 赋值，对以下情况完全无感：
- 运行时通过
document.documentElement.style.setProperty('--color', 'red')注入的变量 - 变量定义在另一个未被 PostCSS 处理的 CSS 文件中
- 拼写错误的变量名（如引用了未定义的
--missing）
这意味着：若组件库依赖 JS 动态主题切换，就别指望构建时插件能帮你降级到 IE 兼容代码。
最易被忽略的兼容性盲区
很多组件库文档写着「支持 IE11」，实际只验证了静态主题场景；一旦引入暗黑模式开关、布局缩放系数、字体大小响应式变量等 JS 驱动的 --is-dark 或 --scale 类变量，IE11 就会直接失效——这类变量必须改用 data-theme="dark" class 控制，彻底绕开 var() 条件渲染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
