IE11及更早版本完全不解析var(--x)，整条CSS声明被静默丢弃；必须用postcss-custom-properties设preserve:false彻底移除var()，变量须定义在:root且为纯常量，fallback需前置静态值，兜底推荐no-cssvars类而非@supports。
IE11 及更早版本根本不会解析 var(--x)，整条 CSS 声明被静默丢弃——不是颜色没变，而是样式直接消失。必须让构建产物里彻底没有 var() 函数调用，否则任何 fallback 写法都无效。
postcss-custom-properties 必须设 preserve: false
默认配置下插件只追加降级值，比如把 color: var(--primary); 编译成：
color: #007bff; color: var(--primary);
IE 看到第二行就跳过，最终取继承色或 initial（背景变透明，color 常为黑色）。只有显式设置 preserve: false，插件才会删掉含 var() 的行，只留静态值。
-
preserve: true或不写该选项 → 构建后仍有var(--x)，IE 依旧失效 - Webpack/Vite 中需确认插件顺序：
postcss-custom-properties必须在autoprefixer之前 - 若同时用
css-vars-ponyfill，它依赖原始var()存在；此时配preserve: false会让 ponyfill 失效，得换方案
:root 定义 + 纯常量值是唯一安全组合
PostCSS 插件是编译期工具，无法读取 JS 动态设置、跨文件定义、或运行时计算的值。能被降级的变量必须满足：
立即学习“前端免费学习笔记（深入）”；
- 声明位置：必须在
:root（最稳妥），或通过@import明确引入的同一文件内；.card { --pad: 1rem; }这类局部定义默认不处理 - 值类型：只能是纯常量 ——
--color: red;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析，建议提至顶层
fallback 写法必须前置静态值，且不能用于复合属性
很多人误以为 color: var(--text, #333); 能兜底 IE，其实 IE 连 var() 语法都不认识，整条声明被跳过，结果仍是继承值。
- 正确写法：
color: #333; color: var(--text-color, #333);—— IE 用第一行，现代浏览器覆盖第二行 - 复合属性如
background、border含var()时，IE 会丢弃整条声明（背景变transparent，边框消失） - 安全做法：拆成原子属性，例如
background-color: #fff; background-color: var(--bg, #fff);+background-image: url();
用 no-cssvars 类比 @supports 更可靠
@supports (background: var(--x)) 在 IE11 中本身不被识别，整条规则被忽略，起不到降级作用。
- 推荐 JS 检测：
CSS.supports('color', 'var(--_)')（注意不能用CSS.supports('--theme')，IE 报TypeError） - 给
<html>加no-cssvars类最可靠：<script>if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars');</script> - 再写
.no-cssvars .btn { background: #007bff; }，避免依赖 CSS 解析行为
构建后务必打开产出的 CSS 文件，全局搜索 var(-- —— 如果还有残留，说明变量定义跨文件、值含 calc()、或插件未生效。这些地方只能手动处理，没有自动兜底。
