ie11及更早版本直接忽略var(--x)声明导致样式丢失；postcss-custom-properties需设preserve: false才移除变量、保留降级值；变量须在:root定义、为静态常量，calc()中嵌套var()需手动处理。
旧版浏览器（尤其是 IE11 及更早版本）不是“不支持 CSS 变量”，而是直接忽略 var(--x) 整条声明——.btn { background: var(--primary); } 在 IE 里等同于 .btn { }，背景会变成透明或继承值，不是颜色没变，是样式彻底丢失。
postcss-custom-properties 必须设 preserve: false
默认配置下插件只生成双声明：background: #007bff; background: var(--primary);。IE 看到第二行就跳过，最终取初始值（比如透明背景、黑色文字），大面积样式失效。
-
preserve: false才会真正移除var()调用，只保留降级后的静态值 - 若你同时用
css-vars-ponyfill，必须配preserve: true，否则 ponyfill 因变量未定义而跳过，双失效 - Webpack/Vite 项目中，确保插件顺序在
autoprefixer之前，否则可能被后续处理干扰
变量定义必须满足硬约束
PostCSS 插件是编译期工具，它看不到 JS 动态设置的变量，也读不到跨文件定义的内容。所有能被降级的变量，必须满足：
- 声明在
:root最稳妥；.card { --pad: 1rem; }这类局部定义默认不处理 - 值只能是纯静态常量：
--color: red;✅，--size: calc(1rem + 2px);❌，--c: var(--base);❌ - 媒体查询内定义的变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被回溯解析，建议提至顶层
运行时检测和兜底 class 比 @supports 可靠
@supports (background: var(--x)) 在 IE 中本身不被识别，整条规则会被忽略，不能作为降级依据。
- JS 检测别写
CSS.supports('--x')——IE11 报TypeError；正确写法是CSS.supports('color', 'var(--theme)') - 给
加no-cssvars类最可靠：<script>if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars');</script> - 再写
.no-cssvars .btn { background: #007bff; }，关键样式必须靠 class 切换兜底
真正容易被忽略的是：calc() 里嵌套 var()（如 width: calc(100% - var(--gap))）在 IE11 中整个表达式被 parser 直接跳过，PostCSS 默认也不处理——这类写法必须手动拆解为静态值，或改用 JS 注入内联样式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
