旧版浏览器（ie11、safari ≤11.1、ios ≤12）直接跳过含 var() 的整条 css 声明，导致样式丢失；必须用静态值在前、var() 在后的双行写法，且 fallback 值单位一致、变量定义于 :root、postcss-custom-properties 需设 preserve: false。
旧版浏览器（IE11、Safari ≤11.1、iOS ≤12）不是“不支持 CSS 变量”，而是直接跳过整条含 var(--x) 的声明——.btn { background: var(--primary); } 在 IE 里等同于 .btn { }，背景彻底消失，不是变灰或变透明，是样式链断裂。
必须写两行：静态值在前 + var() 在后
靠 var(--x, #fff) 的逗号 fallback 没用，IE 连函数语法都不认，整行被丢弃。真正生效的只有同一选择器内、连续、顺序固定的两行：
-
background-color: #007bff;—— IE 只读这一行 -
background-color: var(--primary, #007bff);—— 现代浏览器覆盖它，变量未定义时自动回退
顺序不能颠倒；不能拆到不同 CSS 文件或不同规则块；fallback 值单位必须一致（--gap: 12px → margin: 12px，不能写 margin: 12）。
复合属性如 background、border 必须拆成原子属性
background: var(--bg); 或 border: 1px solid var(--border-color); 在旧浏览器中整条声明失效，边框/背景直接消失。
- 错误：
background: #fff; background: var(--bg);—— 第二行含var()，IE 跳过，只剩透明背景 - 正确：拆解为
background-color: #fff;+background-color: var(--bg);，再单独写background-image等 - 同理，
border拆成border-color、border-width、border-style三行，每行都带静态 fallback
postcss-custom-properties 必须设 preserve: false
默认配置下插件只生成双声明（background: #007bff; background: var(--primary);），但 IE 看到第二行就跳过，最终取初始值（比如 background 变 transparent）。只有 preserve: false 才会真正移除 var()，只保留降级后的静态值。
- 变量必须定义在
:root，且值为纯静态常量（--c: red;✅，--s: calc(1rem + 2px);❌） - 跨文件定义、JS 动态设置（
element.style.setProperty('--x', 'red')）、@media内定义的变量，插件完全无法处理，必须手动补 fallback - 构建后务必检查输出 CSS：全局搜索
var(--，只要还有残留，说明那些变量没被插件处理到
运行时检测别用 @supports (background: var(--x))
这个写法在 IE 和旧 Safari 中本身不被识别，整条 @supports 规则会被忽略，起不到兜底作用。
- JS 检测要写成
CSS.supports('color', 'var(--_)')，不是CSS.supports('--_')（后者在 IE 报TypeError） - 最可靠做法：脚本加类
no-cssvars到，再写.no-cssvars .btn { background-color: #007bff; } -
calc(100% - var(--gap))这类嵌套写法，PostCSS 默认不处理，IE 直接跳过整个表达式——必须手动替换为固定值，或改用 JS 注入内联样式
最容易被忽略的是：所有 fallback 都得在编译期就写死，一旦依赖 postcss-custom-properties，就等于放弃了运行时主题切换能力；而 JS 动态注入的变量，在旧浏览器里根本不会触发任何降级逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
