IE11不支持CSS变量，postcss-custom-properties仅静态替换，无法处理嵌套var()、媒体查询重定义或JS动态修改；真正兼容需运行时polyfill如ie11CustomProperties。
IE11 不支持 var(--color)，PostCSS 插件无法在运行时补全变量计算逻辑——它只做静态替换，而 CSS 自定义属性是动态继承、可被 JavaScript 修改的。直接用 PostCSS 处理 var() 会出错或漏值。
为什么 postcss-custom-properties 不适用于 IE11
这个插件默认行为是「编译期展开」：它把 var(--main-color) 替换成你在 :root 里写的字面值，比如 red。但它不处理以下情况：
- 嵌套
var()，如--text: var(--main-color); color: var(--text); - 媒体查询中重定义的变量，如
@media (max-width: 768px) { :root { --main-color: blue; } } - JS 动态设置的
element.style.setProperty('--main-color', 'green')
也就是说，一旦你依赖变量的响应式或交互能力，postcss-custom-properties 编译后就失效了。IE11 用户看到的是初始值，且无法更新。
真正能跑在 IE11 上的方案只有运行时垫片
必须用 JavaScript 在页面加载后扫描 DOM、读取 getComputedStyle、递归解析 var() 并写入 style 属性。目前唯一稳定可用的是 ie11CustomProperties：
- 它监听
CSSStyleSheet.insertRule和document.styleSheets变化，支持动态注入的样式 - 只遍历含
--*声明的元素，避免全量 DOM 扫描拖慢首屏 - 提供
ie11CustomProperties.update()手动触发，适合 JS 改变变量后调用
引入方式很简单：
<script src="https://unpkg.com/ie11CustomProperties@4.1.0/dist/ie11CustomProperties.min.js"></script>
不需要任何配置，脚本会自动执行。
PostCSS 只能辅助，不能替代运行时逻辑
如果你仍想用 PostCSS，它唯一安全的用途是「降级兜底」：为关键颜色/尺寸生成 IE 友好 fallback，例如：
button {<br> background-color: #007bff;<br> background-color: var(--primary, #007bff);<br>}
这时 postcss-custom-properties 可以删掉第二行（因 IE 不识别 var()），但第一行必须保留。要点是：
- 永远把原生值写在
var()前面，IE 会忽略后半句 - 不要指望 PostCSS 把
var(--size) + 2px这类计算转成16px—— 它不支持 CSS calc 解析 -
postcss-custom-media或postcss-custom-selectors同理，IE11 需要对应运行时 polyfill
最常被忽略的一点：IE11 的 CSSStyleSheet.cssRules 是只读的，且对 @import 超过三级的样式表直接丢弃。这意味着哪怕你用 PostCSS 把所有变量都展开了，如果样式表是通过 @import 链式加载的，IE11 可能根本没加载到那部分 CSS —— 运行时垫片反而能绕过这个限制，因为它操作的是已解析的 DOM 样式树。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
