ie11及更早版本完全不支持var()语法，整条css声明被静默丢弃；postcss需手动启用custom-properties并显式配置插件，变量须定义在:root且为静态常量，嵌套引用、calc内var()及媒体查询中var()均无效。
IE11 及更早版本压根不识别 var() 语法，整条 CSS 声明会被静默丢弃——不是“ fallback 没生效”，而是浏览器连解析都跳过了。你看到背景透明、边框消失、文字变黑，不是代码写错，是那行 CSS 根本没进渲染流水线。
PostCSS 插件默认根本不会处理 CSS 变量
很多人装了 postcss-preset-env 就以为万事大吉，其实它默认只启用 stage 3 特性，而 CSS 自定义属性属于 stage 2，必须手动打开：
-
postcss-preset-env配置里漏掉features: { 'custom-properties': true }，插件就不会运行postcss-custom-properties - 即使装了
postcss-custom-properties，若没在 PostCSS 配置中显式调用，它也不会生效 - 构建后检查输出 CSS：如果还能看到满屏
var(--x)，说明降级链从第一步就断了
变量必须定义在 :root 且值为静态常量
postcss-custom-properties 是静态分析工具，只能替换它“看得见、算得清”的变量：
小红书长文-谷歌浏览器
下载
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
- 局部作用域定义（如
.card { --pad: 1rem; }）默认被跳过，除非额外配importFrom或把变量提至:root -
--size: calc(1rem + 2px)或--c: var(--base)这类含函数或嵌套引用的值，插件无法求值，原样保留 → IE 照样丢弃整条声明 - JS 动态设置的变量（
document.documentElement.style.setProperty('--color', 'red')）完全不可见，插件无从下手
preserve: true 不是可选项，而是动态能力的前提
设成 false 或不写，输出只剩 color: #007bff；设成 true 才会保留 color: var(--primary, #007bff) ——但注意，IE 依然不认 var()，所以你还得靠前置静态值兜底：
- 写法必须是：
background: #f8f9fa; background: var(--bg, #f8f9fa);（顺序不能反） -
@supports (background: var(--_))可用于包裹增强样式，但它在 IE 中本身不被支持，不能单独作为兼容依据 - 如果项目需要 runtime 主题切换或 CSS-in-JS 注入，
preserve: true是刚需，否则 JS 改不了变量
calc() 里套 var() 在 IE 中彻底无效
width: calc(100% - var(--gap)) 这种写法，IE 不是“只忽略 var()”，而是整个 calc() 表达式被 parser 直接跳过。PostCSS 默认也不处理这种嵌套：
- 不要指望
postcss-custom-properties+postcss-calc自动链式替换——顺序错、配置漏，结果还是空值 - 稳妥做法：把
--gap: 8这类纯数字变量，直接写成margin: calc(100% - 8px) - 如果
gap必须动态，就得用 JS 注入内联样式，或放弃 IE11 支持
最易被忽略的一点：媒体查询里不能用 var()，这不是兼容性问题，是 CSS 规范硬限制——@media (min-width: var(--sm)) 在任何浏览器里都会被静默忽略。正确做法是用媒体查询去重设 :root 中的变量值，再让 var() 在普通规则里引用它。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
