ie11及更早版本完全不支持css变量，遇到var()函数会静默丢弃整条声明，连fallback值也不读取；必须通过postcss等工具在构建时彻底移除var()并保留静态值，且变量须定义在:root中、单位一致。
必须让最终 CSS 文件里彻底没有 var() 函数调用，否则 IE11 及更早版本会静默丢弃整条声明——不是颜色没变，而是样式直接消失。
为什么 color: var(--text, #333) 在 IE 里完全无效
IE 的 CSS 解析器根本不认识 var() 这个函数名，遇到整行就跳过，连括号里的 #333 都不会读取。它不走 fallback 逻辑，也不尝试提取逗号后参数。所谓“后备值”在 IE 中纯属幻觉。
- 错误写法：
color: var(--text, #333);→ IE 直接忽略该行，取继承值或initial（比如文字变黑、背景变透明） - 正确写法：
color: #333;紧接着同一选择器内写color: var(--text, #333);→ IE 用第一行，现代浏览器覆盖第二行 - 顺序不能颠倒；两行必须在同一规则块内，不能拆到不同 class 或文件中
PostCSS 降级必须设 preserve: false
postcss-custom-properties 默认配置只追加静态值（如 color: #007bff; color: var(--primary);），但 IE 仍会跳过第二行，导致样式失效。只有显式设 preserve: false 才会真正删掉含 var() 的行，只保留降级后的静态值。
- Webpack/Vite 中确保插件在
autoprefixer之前运行，否则可能被覆盖 - 若同时用了
css-vars-ponyfill，就不能开preserve: false—— 否则 ponyfill 找不到原始var()无法运行时注入 - 构建后务必打开产出的 CSS 文件，全局搜索
var(--，若有残留，说明变量定义跨文件、含calc()、或由 JS 动态设置（插件完全看不见）
哪些变量能被安全降级，哪些必须手动处理
PostCSS 插件是编译期工具，只能处理静态、可确定的值。它看不到 JS 设置的变量，也读不到媒体查询里动态定义的内容。
- ✅ 安全：定义在
:root里的纯常量，如--color: #007bff;、--gap: 12px; - ❌ 不安全：
--size: calc(1rem + 2px);、--c: var(--base);、@media (min-width: 768px) { :root { --gap: 16px; } } -
width: calc(100% - var(--gap))在 IE 中不是变量失效，而是整个calc()表达式被 parser 跳过 —— 必须手写成width: calc(100% - 12px);或改用 JS 注入内联样式 - 复合属性（
background、border、font）必须拆解为原子属性分别加 fallback，否则 IE 会丢弃整条声明
用 no-cssvars 类比 @supports 更可靠
@supports (background: var(--x)) 在 IE11 中本身不被识别，整条规则被忽略，起不到任何降级作用。JS 检测也要传完整声明字符串：CSS.supports('color', 'var(--t)')，传 '--t' 会在 IE 报 TypeError。
- 推荐做法：在 HTML 加载早期插入脚本，检测后给
添加no-cssvars类：if (!CSS.supports('color', 'var(--_)')) document.documentElement.classList.add('no-cssvars'); - 再写
.no-cssvars .btn { background: #007bff; }，这样兜底样式精准可控 - 别指望
@supports not (background: var(--x))自动包裹降级规则——IE 根本不解析这条规则，等于白写
最易被忽略的一点：所有变量必须定义在 :root，且 fallback 值单位必须一致（--gap: 12px → fallback 写 12px，不能只写 12）。局部作用域变量（如 .card { --pad: 1rem; }）即使被 PostCSS 处理，也无法传播到子选择器的 IE 渲染链中——那不是 bug，是 IE 根本不支持变量这个概念。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
