var()的第二个参数是回退值，仅在变量未声明或值无效时生效；注释、额外规则或calc内嵌套var()均无法实现降级，IE11会静默丢弃含var()的整条声明。
直接写回退值在声明里就行，别用注释
CSS变量的回退机制不是靠注释或额外规则实现的，而是靠 var() 函数第二个参数——它就是专为降级设计的。很多人误以为要靠 /* fallback */ 注释或者媒体查询兜底，其实那根本不起作用。
浏览器遇到不认识的 var(--color) 时，会直接跳过整个声明；但如果你写了 var(--color, #333)，不支持 CSS 变量的旧浏览器（比如 IE11 或更早）会把整个 var() 当作无效值，退回到你写的第二个参数。
-
var(--primary-color, #007bff)：IE11 渲染成#007bff，现代浏览器取变量值 - 第二个参数可以是任何合法 CSS 值：颜色、长度、数字、甚至另一个
var()（但嵌套回退不推荐） - 不能写成
var(--color) /* #333 */—— 注释不会被当作回退，整条声明在旧浏览器里直接失效
避免在 :root 外重复定义变量回退
有人想“保险起见”，在每个用到变量的地方都写一遍回退，比如：color: var(--text, #222); background: var(--bg, #fff); border-color: var(--border, #ddd);。这看似稳妥，实则埋坑。
真正的问题是维护成本和语义断裂：一旦主色调变了，你得改十几处回退值。正确做法是只在 :root 里定义变量时就带默认值，其他地方统一用 var(--x)，不加回退。
-
:root { --text: #222; }→ 现代浏览器用这个；IE11 完全忽略这行，所以必须靠使用处的回退 -
:root { --text: var(--text-fallback, #222); }这种写法没意义，IE11 不解析--text声明，后续所有var(--text)都会 fallback 到空值 - 唯一可靠的组合是：
:root { --text: #007bff; }+color: var(--text, #222);
IE11 下 calc() 和变量混用会出错
IE11 虽然不支持 CSS 变量，但它会尝试解析 calc() 里的内容。如果里面夹着 var()，整个 calc() 表达式会变成无效值，导致属性失效。
比如 width: calc(100% - var(--gap, 16px)); 在 IE11 中会被当成非法值，宽度变成 auto 或 0。
- 安全写法是拆开：先用变量控制基础值，再用固定值做计算，例如
margin-left: var(--gap, 16px); width: calc(100% - 16px); - 或者用 JS 检测支持性，动态加 class 控制不同规则（但多数项目没必要这么重）
- 不要指望
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);），也无法还原逻辑运算。而且编译后代码体积增大，调试困难。
- 只适合简单扁平变量场景，比如纯颜色、字号
- 编译后的回退值是静态的，改一个变量就得重新构建，不如手写可控
- autoprefixer 完全不处理 CSS 变量，别指望它帮你降级
回退的关键不在工具，而在声明位置和函数用法。最易忽略的是：var() 的第二个参数必须是语法合法且浏览器能理解的原始值，而不是另一个变量名或表达式——这点在复杂布局中很容易翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
