ie11及更早版本不解析var(--x)，整条css声明被静默丢弃；需用postcss-custom-properties设preserve:false彻底删除含var()的行，并配合no-cssvars类强制降级。
IE11 及更早版本根本不会解析 var(--x)，整条 CSS 声明被静默丢弃——不是颜色没变，而是样式直接消失。所谓“优雅降级”，本质是两件事：构建时把变量彻底删干净，运行时用 class 强制切回静态样式。
postcss-custom-properties 必须设 preserve: false
默认配置下插件只追加降级值，比如把 background: var(--primary); 编译成：
background: #007bff; background: var(--primary);
IE 看到第二行就跳过，最终取初始值（背景透明、文字黑色）。只有 preserve: false 才会真正删掉含 var() 的行，只保留静态值。
-
preserve: true或不写该选项 → 构建后仍有var(--x)，IE 依旧失效 - Webpack/Vite 中需确认插件顺序：
postcss-custom-properties必须在autoprefixer之前 - 若同时用
css-vars-ponyfill，它依赖原始var()存在；此时必须配preserve: true，但 IE 下会双失效
变量定义必须满足三个硬约束
PostCSS 插件是编译期工具，它看不到 JS 动态设置、跨文件定义、或运行时计算的值。能被降级的变量必须同时满足：
- 声明位置：
:root下最稳妥；.card { --pad: 1rem; }这类局部定义默认不处理，除非显式配importFrom指向该文件 - 值类型：只能是纯静态常量 ——
--color: red;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析，必须提至顶层
关键样式必须前置静态值 + no-cssvars class 双兜底
@supports (background: var(--x)) 在 IE 中本身不被识别，整条规则会被忽略，不能作为主降级依据。真正可靠的兜底方式是：
- JS 检测写法：
CSS.supports('color', 'var(--_)')（别写CSS.supports('--x')，IE 会报TypeError） - 脚本注入：
<script>if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars');</script> - 样式写法：
.btn { background: #007bff; } .no-cssvars .btn { background: #007bff; }——注意不是覆盖，是无条件 fallback + class 强制覆盖 - 复合属性如
background、border含var()时，IE 会丢弃整条声明；必须拆成原子属性，例如background-color: #fff;+background-color: var(--bg, #fff);
构建后必须人工验证输出是否干净
运行构建后，打开产出的 CSS 文件，全局搜索 var(--：
- 如果还有残留，说明变量未定义、值含
calc()、或 JS 动态注入（如document.documentElement.style.setProperty('--c', 'red')），插件完全看不见 - 局部作用域变量（如
.card { --pad: 1rem; }）会被处理，但不会“传播”到父选择器，别指望它能覆盖全局 fallback - 媒体查询里引用变量（如
@media (min-width: var(--breakpoint))）属于语法层使用，PostCSS 不处理，这类地方必须手写固定值
最容易被忽略的是：所有含 var() 的复合属性（background、border、box-shadow）在 IE 中整条失效，不是局部降级——必须手动拆解为原子属性，否则按钮变透明、边框消失、阴影截断都是常态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
