css变量在ie11等旧浏览器中完全不解析，需用后备值前置写法（如color: #333; color: var(--c, #333)）并拆分复合属性；postcss仅静态替换同文件内变量，跨文件、calc()、js注入及媒体查询中变量需手动处理；须用@supports或js检测添加no-cssvars类实现双重兜底，且后备值须单位一致、不可嵌套。
CSS 变量在 IE11、iOS 12 以下、Android 4.4 WebView 等环境里根本不会被解析，var(--color) 整条声明直接静默丢弃，不是“颜色没变”，是样式链断裂——按钮变透明、文字继承黑色、背景塌陷都可能发生。
后备值必须写在 var() 前面，且在同一行
这是最容易翻车的操作点：很多人写成两行或把后备值塞进 var() 第二个参数，结果在 IE 里全失效。
-
color: #333; color: var(--text-color);→ IE 读第二行，var(--text-color)无效，最终取继承色（常为黑色） -
color: var(--text-color, #333);→ IE 连var()语法都不认识，整条跳过，同样回退到继承值 - 正确写法：
color: #333; color: var(--text-color, #333);→ IE 忽略第二行，用第一行；现代浏览器覆盖第一行
涉及 background、border 等复合属性时不能只写一个后备
复合属性一旦含 var()，旧浏览器会把整个声明当无效值丢弃，而不是局部降级。比如 background: #fff url(img.png) no-repeat; background: var(--bg, #fff) url(img.png) no-repeat; 在 IE 里第二行完全不生效，背景变成 transparent。
- 必须拆成原子属性：
background-color: #fff; background-color: var(--bg, #fff);+background-image: url(img.png); -
border: 1px solid #ccc; border: 1px solid var(--border-color, #ccc);同样危险——IE 会丢弃整条border声明，边框消失 - 安全做法：只对单值属性用
var()，或拆成border-color、border-width单独声明
PostCSS 替换后仍要人工检查输出是否干净
postcss-custom-properties 插件能静态替换变量，但它的能力边界非常明确：只处理同一文件内、:root 或明确作用域中已定义的静态值，且 preserve: false 必须开启。
- 构建后打开产出的 CSS 文件，全局搜索
var(--—— 如果还有残留，说明变量定义跨文件、值含calc()、或 JS 动态注入（如document.documentElement.style.setProperty('--c', 'red')），插件完全看不见 - 局部作用域变量（如
.card { --pad: 1rem; }）会被处理，但不会“传播”到父选择器，别指望它能覆盖全局 fallback - 媒体查询里引用变量（如
@media (min-width: var(--breakpoint))）属于语法层使用，PostCSS 不处理，这类地方必须手写固定值
关键颜色必须双重兜底：@supports + no-cssvars class
@supports (color: var(--x)) 在 IE11 里本身就不支持，所以它只能用于增强，不能当唯一防线。
- JS 检测并加类：
if (!CSS.supports('color', 'var(--t)')) document.documentElement.classList.add('no-cssvars'); - CSS 中写两套：
.btn { background-color: var(--primary); } .no-cssvars .btn { background-color: #007bff; } - 不要混用顺序 fallback 和 class fallback——两者逻辑不同，叠加反而增加维护成本；选一种并贯穿到底
最常被忽略的是单位一致性：如果 --gap: 12px，fallback 就必须是 margin: 12px，写成 margin: 12 在旧浏览器里就是无效声明。另外，所有 fallback 值都不能是另一个 var()，嵌套写法在 IE 里连语法树都不会建。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
