如何确保CSS变量在旧版浏览器中兼容？采用CSS自定义属性及后备方案可行吗？

本文共计1049个文字，预计阅读时间需要5分钟。

直接说结论：

---

为什么 var(--x, #fff) 在 IE 里不生效

这是最常踩的坑：误以为后备值能兜底所有旧浏览器。

• var(--x, #fff) 的后备机制只在支持 CSS 变量语法的浏览器中起作用（Chrome 49+、Firefox 31+、Safari 9.1+）
• IE11 遇到 color: var(--x, #fff)，直接判定整条声明无效，跳过执行，最终取继承值或属性初始值（比如 color 变成黑色）
• 后备值不能是另一个 var()，也不能是 initial 或 unset——这些在 IE 里同样无效，且语义混乱

正确做法是：把静态值写在 var() 前面，让 IE 优先读取它：

button { background: #007bff; /* IE 和所有浏览器都认 */ background: var(--primary, #007bff); /* 支持变量的浏览器覆盖上一行 */ }

注意顺序不可颠倒。浏览器按声明顺序应用，后声明的会覆盖前声明的（同优先级下）。

立即学习“前端免费学习笔记（深入）”；

---

@supports (color: var(--x)) 是唯一可靠检测方式

不能用 @supports (--x: red) —— 这个语法不合法，所有浏览器都会忽略。