IE浏览器（包括IE11）完全不解析var(--x)语法，整条CSS声明被忽略，导致样式丢失；必须通过构建时PostCSS降级（preserve: false）或运行时css-vars-ponyfill兜底，二者需分层配合使用。
IE 浏览器（包括 IE11）根本不解析 var(--x) 语法，不是“兼容性差”，而是整条 CSS 声明被忽略——比如 .btn { color: var(--primary); } 在 IE 里等同于 .btn { }，样式直接丢失。靠 @supports 或 fallback 写法无法兜底，必须用运行时补丁或构建时降级。
css-vars-ponyfill 在 IE 中为何能“生效”
它不修改原始 CSS，而是在页面加载后扫描所有 `
关键点：
- 仅处理静态可读取的变量：定义必须在 CSS 文件内（不能是 JS 动态 setProperty），且不能嵌套（
--a: var(--b)不支持） - 不支持
calc(var(--gap) + 1px)这类混合表达式；插件只替换顶层var()，不解析函数体内部 - 媒体查询里不能用变量：
@media (min-width: var(--sm))→ IE 直接跳过整条@media规则 - 默认启用
watch: true会监听DOMSubtreeModified，但 IE11 不支持该事件，实际退化为单次执行
为什么用了 css-vars-ponyfill 还是没效果
常见失败不是库没加载，而是它根本没找到可处理的变量源。典型现象：
立即学习“前端免费学习笔记（深入）”；
- 控制台无报错，但 IE 里颜色/尺寸全回退成浏览器默认值
- 检查元素发现内联样式没被注入，
element.style为空 - 变量定义在组件级作用域（如
.card { --pad: 1rem; }），插件默认只读:root
解决办法：
- 确保变量集中声明在
:root，例如：:root { --primary: #007bff; --gap: 8; } - 显式传入
onlyVars: true避免遍历全部 CSS 规则，提升 IE 下执行速度 - 禁用
watch：watch: false，IE11 下开启反而可能因事件不兼容导致静默失败 - 若变量来自 JSON 或 JS 模块，需手动调用
cssVars({ variables: { '--primary': '#007bff' } })
postcss-custom-properties 和 css-vars-ponyfill 能否混用
可以，但必须严格分层：PostCSS 负责构建时静态降级（针对已知常量），ponyfill 负责运行时兜底（覆盖 JS 动态设置、跨文件变量等 PostCSS 捕捉不到的场景）。
常见错误配置：
- PostCSS 的
preserve: true（默认值）→ 构建后仍留着var(--x)，ponyfill 又因变量未定义而跳过，最终双失效 - ponyfill 在
DOMContentLoaded前执行，但 CSS 尚未加载完成 → 找不到任何:root定义 - Webpack + CSS Modules 项目中，哈希类名让 ponyfill 无法关联作用域，必须改用全局
:root变量
推荐初始化时机：
document.addEventListener('readystatechange', () => { if (document.readyState === 'complete') { cssVars(); } });
IE 中真正不可绕过的硬限制
哪怕 ponyfill 正常工作，IE 自身的渲染引擎缺陷仍会导致意外问题：
- 超过 31 个 `
- 单个 CSS 文件超过 4095 条规则 → 后续规则失效
- 动态插入 `