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

解决办法：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

• 确保变量集中声明在 :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 条规则 → 后续规则失效
• 动态插入 `