怎样为CSS变量提供旧版浏览器回退值

var()的第二个参数是回退值，仅在变量未声明或值无效时生效；注释、额外规则或calc内嵌套var()均无法实现降级，IE11会静默丢弃含var()的整条声明。

直接写回退值在声明里就行，别用注释

CSS变量的回退机制不是靠注释或额外规则实现的，而是靠 var() 函数第二个参数——它就是专为降级设计的。很多人误以为要靠 /* fallback */ 注释或者媒体查询兜底，其实那根本不起作用。

浏览器遇到不认识的 var(--color) 时，会直接跳过整个声明；但如果你写了 var(--color, #333)，不支持 CSS 变量的旧浏览器（比如 IE11 或更早）会把整个 var() 当作无效值，退回到你写的第二个参数。

1. var(--primary-color, #007bff)：IE11 渲染成 #007bff，现代浏览器取变量值
2. 第二个参数可以是任何合法 CSS 值：颜色、长度、数字、甚至另一个 var()（但嵌套回退不推荐）
3. 不能写成 var(--color) /* #333 */ —— 注释不会被当作回退，整条声明在旧浏览器里直接失效

避免在 :root 外重复定义变量回退

有人想“保险起见”，在每个用到变量的地方都写一遍回退，比如：color: var(--text, #222); background: var(--bg, #fff); border-color: var(--border, #ddd);。这看似稳妥，实则埋坑。

真正的问题是维护成本和语义断裂：一旦主色调变了，你得改十几处回退值。正确做法是只在 :root 里定义变量时就带默认值，其他地方统一用 var(--x)，不加回退。

1. :root { --text: #222; } → 现代浏览器用这个；IE11 完全忽略这行，所以必须靠使用处的回退
2. :root { --text: var(--text-fallback, #222); } 这种写法没意义，IE11 不解析 --text 声明，后续所有 var(--text) 都会 fallback 到空值
3. 唯一可靠的组合是：:root { --text: #007bff; } + color: var(--text, #222);

IE11 下 calc() 和变量混用会出错

IE11 虽然不支持 CSS 变量，但它会尝试解析 calc() 里的内容。如果里面夹着 var()，整个 calc() 表达式会变成无效值，导致属性失效。

比如 width: calc(100% - var(--gap, 16px)); 在 IE11 中会被当成非法值，宽度变成 auto 或 0。

1. 安全写法是拆开：先用变量控制基础值，再用固定值做计算，例如 margin-left: var(--gap, 16px); width: calc(100% - 16px);
2. 或者用 JS 检测支持性，动态加 class 控制不同规则（但多数项目没必要这么重）
3. 不要指望 calc(var(--x, 16px)) 能工作——IE11 解析到 var 就停了，后面整个 calc 作废

PostCSS 插件不是万能解，慎用 autoprefixer

有人装了 postcss-custom-properties，以为能自动补全所有回退。它确实能把 var(--x, red) 编译成 color: red; color: var(--x, red);，但实际效果很有限。

问题在于：它无法处理变量依赖链（比如 --size: var(--base, 1rem); --padding: calc(var(--size) * 2);），也无法还原逻辑运算。而且编译后代码体积增大，调试困难。

1. 只适合简单扁平变量场景，比如纯颜色、字号
2. 编译后的回退值是静态的，改一个变量就得重新构建，不如手写可控
3. autoprefixer 完全不处理 CSS 变量，别指望它帮你降级

回退的关键不在工具，而在声明位置和函数用法。最易忽略的是：var() 的第二个参数必须是语法合法且浏览器能理解的原始值，而不是另一个变量名或表达式——这点在复杂布局中很容易翻车。