IE11 完全不解析 var(--x)，需构建时用 postcss-custom-properties（preserve: false）静态替换 + 运行时 JS 检测兜底；变量须定义在 :root、为纯常量、无 calc() 或嵌套，且后备值单位一致。
IE11 对 var(--x) 语法完全不解析，整条 CSS 声明会被静默丢弃——不是颜色没变，而是样式直接消失。没有“部分兼容”，只有“全有或全无”。必须用构建时静态替换 + 运行时兜底双层策略，且任一环节出错都会导致大面积样式崩溃。
postcss-custom-properties 必须设 preserve: false
默认配置下插件只追加降级值，生成类似：
background: #007bff; background: var(--primary);
IE11 看到第二行就跳过，最终取 background 初始值（transparent），按钮背景变空。只有显式设置 preserve: false，插件才会删掉含 var() 的行，只保留静态值。
-
preserve: true或不写该选项 → 构建后仍有var(--x)，IE 依旧失效 - Webpack/Vite 中需确认插件顺序：必须在
autoprefixer之前，否则可能被覆盖 - 若同时用
css-vars-ponyfill，它依赖原始var()存在；此时必须配preserve: true，但 IE 下会双失效——PostCSS 没删掉var()，ponyfill 又因变量未定义而跳过
变量定义必须满足三个硬约束
PostCSS 插件是编译期工具，无法读取 JS 动态设置、跨文件定义或运行时计算的值。能被安全降级的变量必须同时满足：
立即学习“前端免费学习笔记（深入）”；
- 声明位置：
:root最稳妥；.card { --pad: 1rem; }这类局部定义默认不处理 - 值类型：纯常量 ——
--color: red;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 媒体查询内定义（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析，必须提至顶层
兜底写法必须前置静态值，且不能依赖 @supports
@supports (background: var(--x)) 在 IE11 中本身不被识别，整条规则被忽略，起不到降级作用。正确路径是：
- 静态值写在前面：
background-color: #007bff;—— IE 和所有浏览器都认 - 后置
var()覆盖：background-color: var(--primary, #007bff);—— 现代浏览器覆盖第一行 - 复合属性（
background、border、font）必须拆成原子属性，例如：background-color: #fff;+background-color: var(--bg, #fff);+background-image: url(...); - 后备值单位必须一致：
--gap: 12px;的 fallback 就得是12px，不能只写12
运行时检测要靠 CSS.supports('color', 'var(--_)')
别用 CSS.supports('--theme')，IE11 会报 TypeError；也别信 @supports (--x: red)，这是非法语法，所有浏览器都忽略。
- JS 检测应使用
CSS.supports('color', 'var(--_)')（变量名任意，甚至不存在） - 给
<html>加no-cssvars类最可靠：<script>if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars');</script> - 再写
.no-cssvars .btn { background: #007bff; }，比@supports更底层、更可控 - 构建后务必打开产出的 CSS 文件全局搜索
var(--，只要还有残留，说明变量定义跨文件、值含calc()、或 JS 动态注入——这些 PostCSS 都看不见
最容易被忽略的是：IE11 的 calc() 解析器对空格和单位极其敏感，即使 css-vars-ponyfill 把 calc(100% - var(--gap)) 替换成了 calc(100% - 16px)，IE 仍可能因格式问题丢弃整条声明。这种场景必须放弃 calc()，改用 JS 注入内联样式。
