CSS变量在IE11、Edge 12–18等旧浏览器中完全不被解析，整条声明被静默丢弃，fallback不触发；需用静态值前置、原子属性拆分、PostCSS构建时替换，并辅以JS运行时检测加class兜底。
CSS变量在某些浏览器下不生效，90%不是写错了，而是压根没被解析——IE11、Edge 12–18、Safari 12–14、Android 4.4 WebView 这些环境连 var(--x) 语法都不认识，整条声明被静默丢弃，连 fallback 都不触发。
IE11 / EdgeHTML 里 var(--x) 为什么完全无效
IE11 和 Edge 12–18 使用旧渲染引擎，不识别 var() 函数名，遇到 color: var(--text, #333) 直接跳过整行，不会取后备值，也不会报错。它等价于这行 CSS 不存在。
- 别信
var(--x, #fff)能兜底——括号里的内容根本不会被读取 -
@supports (--x: red)是非法语法，所有浏览器都忽略；必须写成@supports (color: var(--_)) - 关键样式必须前置静态值：
background: #007bff; background: var(--primary);，顺序不能颠倒 - 复合属性如
border、background含var()时，IE 会丢弃整条声明，需拆成border-color、background-color等原子属性
PostCSS 替换后还有 var(--x) 残留？检查这几点
postcss-custom-properties 是构建时静态替换工具，不是运行时 polyfill，它只处理满足硬性条件的变量。
- 变量必须定义在
:root或显式作用域（如.theme { --c: red; }），局部选择器如.btn { --bg: blue; }默认不处理 - 值必须是静态常量：
--size: 16px;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 定义和使用必须在同一文件，或通过
@import显式引入；JS 动态设置的document.documentElement.style.setProperty('--x', 'y')完全不可见 - 构建后务必打开产出 CSS 文件，全局搜索
var(--——有残留说明某处不满足条件
伪元素、@keyframes、媒体查询里用 var() 就是自找麻烦
@keyframes 和媒体查询是静态规则解析阶段，不参与运行时计算，var(--x) 在这两个上下文中直接被忽略，连警告都没有。
立即学习“前端免费学习笔记（深入）”；
-
::before/::after中content: var(--tip)在 Edge 75–78 有竞态 bug，建议改用data-tip+ JS 插入文本节点 - 媒体查询断点不能写
@media (min-width: var(--breakpoint))，必须手写固定值，或用预处理器生成 - 动画中要用变量，只能套
calc(var(--offset))，且变量必须定义在触发动画的元素上（如.item:nth-child(1) { --offset: 100px; }） -
@property目前不支持媒体查询上下文，别试图绕过
运行时检测 + class 兜底比 @supports 更可靠
@supports 在 IE 中本身就不支持，不能单独作为降级依据。真正能覆盖全场景的是 JS 运行时检测加 class 切换。
- 检测写法必须是
CSS.supports('color', 'var(--x)')（传完整声明字符串，不是变量名） - 检测失败时给
document.documentElement加no-cssvars类：document.documentElement.classList.add('no-cssvars') - CSS 中写两套：
.btn { background: var(--primary); } .no-cssvars .btn { background: #007bff; } - 对主题色、圆角、间距等关键属性都要覆盖，不能只靠变量降级
最易被忽略的一点：变量拼错、少单位、嵌套 var()、SCSS 插值漏 #{} ——这些都不会报错，只会静默失效。DevTools 里悬停 var(--x) 看提示是不是 unresolved，比猜快得多。
