ie和旧版safari不支持css变量，需构建时降级+运行时兜底双保险；postcss-custom-properties仅静态替换可解析变量，calc()、js赋值等动态场景失效；@supports不可靠，应配合no-cssvars类显式降级；插件须在autoprefixer前执行。
IE 和旧版 Safari 完全不支持 -- 开头的 CSS 变量，直接使用会导致样式丢失；现代方案不是“绕开变量”，而是用构建时降级 + 运行时兜底双保险。
postcss-custom-properties 为什么必须配合静态定义
该插件只在构建阶段做文本替换，前提是变量值能被静态解析。一旦出现 calc()、嵌套变量（如 var(--a, var(--b))）、JS 动态赋值，就无法降级。
-
:root { --color: #333; }✅ 可被完整替换为color: #333; -
:root { --color: calc(1px * 2); }❌ 构建时无法求值，var(--color)会原样保留，IE 直接失效 -
.btn { --bg: blue; background: var(--bg); }✅ 作用域内可替换，但不会影响其他选择器 -
el.style.setProperty('--color', 'red');❌ JS 设置的变量完全逃逸出 PostCSS 能力范围
@supports not (background: var(--x)) 不是万能 fallback
@supports 在 IE 中根本不存在，所以仅靠它包裹降级样式等于对 IE 完全放弃。真正有效的 fallback 必须显式声明。
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 推荐给
加初始 class： - JS 检测后移除：
if (CSS.supports('background', 'var(--x)')) document.documentElement.classList.remove('no-cssvars'); - 写两套规则：
.btn { background: var(--primary); } .no-cssvars .btn { background: #007bff; } - 避免把
@supports当兜底主力——它只是锦上添花，不是安全网
autoprefixer 和 postcss-custom-properties 的执行顺序很关键
如果 autoprefixer 在前，它可能把某些带前缀的属性（如 -webkit-line-clamp）误判为需要处理的变量引用，导致构建报错或输出异常。
- PostCSS 配置中，
postcss-custom-properties必须排在autoprefixer之前 - 验证方式：构建后搜索输出 CSS 文件里是否还有未替换的
var(--—— 如果有，先查配置顺序，再查变量定义位置 - 全局变量优先写在
:root，组件级变量避免跨选择器引用，否则降级后样式错位
最易被忽略的一点：变量降级只解决“值不可用”，不解决“语法不识别”。IE 看到 var(--x) 就当无效声明跳过，但若整条声明因此被丢弃（比如 color: var(--x); font-size: 16px;），后续属性仍生效；而如果写成 color: var(--x, #000);，IE 因不认识 var() 函数，连 fallback 都不读——所以 fallback class 方案比函数 fallback 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
