css-vars-ponyfill 在 IE11 中常失效，主因是默认只处理 :root/:host 下变量、执行过早、未启用 watch、误用 onlyLegacy 且忽略 IE 不支持 @supports；正确做法是 DOM 就绪后调用、设 watch: true、构建时优先用 PostCSS 降级。
IE11 里 var(--x) 不是“不生效”，而是整条 CSS 声明被浏览器静默丢弃——css-vars-ponyfill 能补，但必须用对方式，否则白加。
为什么 css-vars-ponyfill 在 IE11 中常失效
常见现象：加了脚本，IE11 里颜色还是黑的、背景还是透明的、布局直接塌陷。不是 polyfill 没跑，而是它根本没处理到目标 CSS。
-
css-vars-ponyfill默认只处理:root和:host下定义的变量，如果你把--color写在.card选择器里，它直接跳过 - 脚本在
里同步执行，而 CSS 文件还没加载完，ponyfill扫不到<link>或<style></style>里的var() - 启用了
onlyLegacy: true，但忘了 IE11 本身不支持@supports，所以你写的检测逻辑（比如用@supports (color: var(--_))包裹的样式）在 IE 里压根不会解析，ponyfill也就没机会介入
css-vars-ponyfill 的正确初始化时机与配置
关键不是“加没加”，是“什么时候加、怎么配”。它必须等所有 CSS 加载完毕、且 DOM 已就绪后才运行。
- 把
<script></script>放在前，或用DOMContentLoaded包裹 - 必须设
watch: true—— 否则后续 JS 修改document.documentElement.style.setProperty('--color', 'red')，页面样式不会更新 -
onlyLegacy: true可以保留，但别依赖它来“隔离逻辑”；现代浏览器该用的变量逻辑，得靠@supports单独写，不能指望ponyfill替你分环境 - 如果项目用 Webpack/Vite，
import cssVars from 'css-vars-ponyfill'后，需确保调用时机在document.styleSheets已加载完成之后，例如在useEffect(() => { cssVars(...) }, [])（React）或onMounted（Vue）中
calc() + var() 在 IE11 中的硬伤与绕过方式
IE11 的 calc() parser 极其脆弱：width: calc(100% - var(--gap)) 不会变成 calc(100% - 16px)，而是整条声明被忽略——哪怕 ponyfill 已把 var() 替换掉，IE 仍拒绝含空格或单位混合的 calc 表达式。
立即学习“前端免费学习笔记（深入）”；
- PostCSS 的
postcss-custom-properties插件能静态替换，但它对calc(var(--x))默认不处理（无法安全求值），必须手动配合postcss-calc且严格控制执行顺序 - 更稳妥的做法：把这类变量限定为纯数字（如
--gap: 16），然后在 CSS 中写成width: calc(100% - 16px)，让 PostCSS 直接输出固定值 - 若
--gap必须动态（如响应式变化），放弃 IE11 的calc支持，改用 JS 注入内联style，例如el.style.width = `calc(100% - ${gap}px)`
构建时降级比运行时 polyfill 更可靠
css-vars-ponyfill 是运行时方案，每次触发都遍历全部 DOM、重写匹配的 var()，SPA 首屏易卡顿；而构建时用 PostCSS 处理，一次生成、零运行开销，且可控性更强。
- 必须显式开启
postcss-preset-env的custom-properties特性：features: { 'custom-properties': true }，否则插件不干活 -
preserve: true是底线——关掉它，新浏览器就失去主题切换能力；设为true，旧浏览器才能拿到降级后的静态值，新浏览器仍走原生var() - 变量值必须是静态常量：
--size: calc(1rem + 2px)或--c: var(--base)这类写法，PostCSS 无法求值，会原样保留，IE 照样丢弃
真正容易被忽略的是：IE11 不认识 @supports，也不认识 CSS.supports()，任何基于它的运行时检测都会报错。兜底必须靠 JS 判断后加 class，而不是靠 CSS 规则嵌套。
