IE 11 完全不支持 CSS 自定义属性，需构建时降级（postcss-custom-properties + preserve: false）或运行时 polyfill（css-vars-ponyfill），且变量须定义在 :root、calc() 和媒体查询内变量需特殊处理，fallback 必须前置静态值。
IE 11 不支持 var(--x)，不是“部分失效”，而是整条 CSS 声明被静默丢弃——color: var(--text); 在 IE 里等同于没写这行，文字直接回退到继承色（通常是黑色），背景变透明，布局可能塌陷。必须用构建时降级或运行时 polyfill，且两者都不能“加了就完事”。
postcss-custom-properties 必须设 preserve: false
这是最常踩的坑：插件默认只追加静态值，不删除原 var() 行。比如输入 color: var(--c);，输出是：
color: #007bff; color: var(--c);
IE 11 看到第二行就跳过整条规则，最终取 color 初始值（黑色），不是你写的 #007bff。
-
preserve: false→ 输出只剩color: #007bff;，IE 可用，但现代浏览器失去动态能力 -
preserve: true或不配 → 输出双行，IE 仍失效 - Webpack/Vite 中，
postcss-custom-properties必须放在autoprefixer之前，否则可能被覆盖 - 变量必须定义在
:root，且值为纯静态字符串，如--primary: #007bff;；--gap: calc(1rem + 2px)或--c: var(--base)会被跳过
css-vars-ponyfill 只认 :root 里的变量
它不会扫描组件级作用域：.card { --pad: 1rem; } 或 Vue 的 <style scoped> 里的变量，它根本看不到。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确位置：
:root { --primary: #007bff; --gap: 8px; } - ❌ 错误写法：
.btn { --color: red; }、:host { --size: 24px; }、Webpack CSS Modules 生成的哈希类名 - 执行时机必须晚于所有 CSS 加载完成：不能在
<head>里同步调用cssVars()，改用DOMContentLoaded或window.addEventListener('load', ...) -
watch: false是 IE 11 下的合理配置 —— 它不支持DOMSubtreeModified，watch: true实际静默退化为单次执行
calc() 里写 var() 在 IE 11 里双重失效
即使 css-vars-ponyfill 把 var(--gap) 替换成了 16px，最终生成的 calc(100% - 16px) 仍会被 IE 拒绝——它对 calc() 支持极弱，只接受无空格、无多余字符的极简格式（如 calc(100%-16px)）。
- ❌ 避免：
width: calc(100% - var(--gap));、@media (min-width: var(--sm)) - ✅ 安全做法：构建时用 PostCSS 展开，或手动写成
width: calc(100% - 16px); - 媒体查询内定义变量（如
@media (min-width: 768px) { :root { --gap: 16px; } }）通常无法被 PostCSS 回溯解析，建议提至顶层:root - 如果 gap 必须动态，只能靠 JS 注入内联样式，或放弃 IE 11 支持
兜底写法必须前置静态值 + 后置 var() 覆盖
var(--x, #fff) 对 IE 无效——它连 var() 语法都不认识，更不会读括号里的内容。
- ✅ 正确顺序：
background-color: #f8f9fa;（IE 和所有浏览器都认），下一行background-color: var(--bg, #f8f9fa);（现代浏览器覆盖） - ❌ 错误写法：两行拆到不同选择器、或把
background这类简写属性整体加var()fallback（IE 会因语法不合法丢弃整条） - 简写属性必须拆解：
border→ 分成border-style、border-width、border-color三行，每行都带静态值 -
@supports (background: var(--x))在 IE 里会报TypeError，不能单独作为降级依据；JS 检测后加no-cssvars类更可靠
真正麻烦的不是“怎么写 fallback”，而是变量定义位置、构建配置顺序、执行时机、calc() 兼容性这四点全部对齐——漏一个，IE 里就白屏或错位。别指望一次配置全局生效，每个项目都要按实际加载链和作用域重新校验。
