css-vars-ponyfill是ie下支持css自定义属性的最可行方案，它在运行时解析并替换var()，支持嵌套、calc()内使用、动态更新及媒体查询作用域，但需注意ie对calc()+var()的兼容限制和动态更新时需显式触发重计算。
var() 在 IE 中完全不被支持，这不是兼容性问题，而是语法级缺失。IE 无法解析 var(--color) 这类声明，会直接丢弃整条 CSS 规则（包括后续声明），导致样式大面积失效。必须用 polyfill 在运行时将自定义变量“展开”为静态值。
为什么 css-vars-ponyfill 是当前最可行的方案
它不依赖构建时预处理（如 PostCSS 插件），而是在页面加载后、CSSOM 构建完成前介入，遍历所有 :root 和元素上的 style 属性，提取变量定义并批量替换 var() 引用。相比其他 polyfill（如 ie11-custom-properties），它支持嵌套 var()、calc() 内使用、动态更新（set()）、以及媒体查询内的变量作用域。
注意：它只处理已注入 DOM 的 CSS —— 动态插入的 <style></style> 或通过 sheet.insertRule() 添加的规则，需手动调用 cssVars() 重新处理。
基础用法：引入 + 初始化
推荐通过 CDN 异步加载，避免阻塞渲染：
<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill@2/dist/css-vars-ponyfill.min.js"></script><script>
cssVars({
watch: true, // 自动监听 document.documentElement.style 变更
onlyLegacy: true, // 仅在不支持原生 CSS 变量的浏览器中运行（即 IE）
silent: true // 避免控制台输出警告
});
</script>
-
watch: true是关键 —— 否则修改document.documentElement.style.setProperty('--color', 'red')不会触发重计算 - 不要在
中同步执行cssVars()，否则可能因 CSS 尚未加载完毕而漏处理 - 若项目已用 Webpack/Vite，可
import cssVars from 'css-vars-ponyfill'，但需确保 polyfill 在所有 CSS 加载后执行
IE 下 calc() + var() 组合失效的典型表现与修复
IE 原生不识别 calc(100% - var(--gap))，即使 css-vars-ponyfill 替换了 var()，若结果形如 calc(100% - 16px)，IE 仍会拒绝整个表达式（IE9+ 仅支持 calc() 内数字单位混合的极简写法，且不接受空格外的任意字符）。
解决方案是让 ponyfill 输出 IE 兼容格式：
cssVars({
// ...
onBeforeSend: (xhr) => {
// 不适用：xhr 是用于加载外部 CSS 的，此处无需干预
},
onComputedStyle: (computed, element) => {
// 实际修复点在这里：对 calc 表达式做二次标准化
}
});
更实际的做法是：**避免在 IE 场景下依赖复杂 calc + var 组合**。改用以下任一方式：
- 对 IE 单独提供降级 CSS：
@supports not (color: var(--c)) { .box { width: calc(100% - 16px); } } - 用
fallback语法提前兜底：width: calc(100% - 16px); width: calc(100% - var(--gap));（IE 忽略第二行，保留第一行） - 在 JS 中读取
--gap值后手动设置：element.style.width = `calc(100% - ${getComputedStyle(document.documentElement).getPropertyValue('--gap')})`
动态更新变量时容易忽略的边界情况
调用 document.documentElement.style.setProperty('--theme', 'dark') 后，css-vars-ponyfill 默认不会立即响应 —— 它依赖 watch: true 下的 MutationObserver 监听 style 属性变更，但该 observer 仅捕获 setAttribute('style', ...)，不捕获 setProperty() 调用。
因此必须显式通知：
document.documentElement.style.setProperty('--theme', 'dark');
cssVars({ update: true }); // 触发一次重计算
- 遗漏
update: true是 IE 下主题切换失效的最常见原因 - 若频繁更新（如拖拽调节亮度），建议节流调用，避免连续触发重排
-
cssVars({ variables: { '--theme': 'dark' } })可绕过 DOM 操作直接注入变量，适合初始化或服务端渲染场景
真正麻烦的从来不是“怎么加 polyfill”，而是 IE 下变量作用域、calc() 解析、动态更新三者叠加时产生的隐性冲突 —— 这些地方没有报错，只有样式突然消失或错位，得靠反复验证 DOM 计算样式才能定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
