freeCodeCamp 课程实战：用重复声明实现 CSS 浏览器回退（Browser Fallbacks）

2026-09-06 16:59:27作者：秋泉律Samson

本文基于 freeCodeCamp 课程中 Basic CSS 模块的挑战 "Improve Compatibility with Browser Fallbacks" 展开。读完后你将掌握：浏览器解析 CSS 时对未知声明的处理机制、"重复声明式回退"的书写方式，以及如何把它与 var() 第二个参数这两种极易混淆的"回退"手段正确区分，并通过课程中自带的代码挑战与断言正则验证实际效果。

挑战定位与来源

该挑战的完整定义文件位于 5b7d72c338cd7e35b63f3e14.md，frontmatter 中标题为 "Improve Compatibility with Browser Fallbacks"，challengeType: 0（编辑器类挑战），dashedName: improve-compatibility-with-browser-fallbacks。

在课程结构文件 basic-css.json 的 challengeOrder 列表中，它处于 CSS 变量知识段的收尾位置：

5a9d725e... Use CSS Variables to change several elements at once
5a9d726c... Create a custom CSS Variable
5a9d727a... Use a custom CSS Variable
5a9d7286... Attach a Fallback value to a CSS Variable
5b7d72c338cd7e35b63f3e14 Improve Compatibility with Browser Fallbacks（本篇）
5a9d7295... Inherit CSS Variables

也就是说，本篇承接上一篇 var(--name, fallback) 的写法，专门解决另一个问题：当浏览器根本不支持 CSS 变量这种特性时，如何保证页面不"裸奔"。

核心原理：浏览器遇到不认识的声明会怎样

课程原文给出的解释是理解本节的钥匙：

浏览器解析 CSS 时，会忽略它不认识的、或不支持的属性/声明；
例如用 CSS 变量设置背景色，Internet Explorer 不认识 CSS 变量，会直接忽略该背景色；
此时浏览器会使用它当前已知的该属性值；如果找不到任何有效值，就回退到默认值——而这通常不是理想状态。

这里的关键词是 CSS 级联（cascade）的基本行为：同一属性出现多次声明时，后面出现的声明覆盖前面出现的声明；而当某条声明整体无效（属性不认识，或声明值不合法）时，该条声明被丢弃，之前写好的同一条声明如果合法，仍然生效。

基于这两点，课程原文给出的结论非常直白：

提供浏览器回退（browser fallback）只需在目标声明的紧邻前面再写一条兼容性更广的声明即可——旧浏览器会取到前面的值，新浏览器则解析到后面的值。

这正是"重复声明式回退"：不是靠某个语法开关，而是纯粹靠声明顺序 + 无效声明被丢弃这两个级联规则组合出来的效果。

挑战任务与初始代码（Seed）

挑战的 instructions 原文指出：看起来有一个 CSS 变量正在被用来设置 .red-box 类的背景色，让我们通过"在现有声明紧邻前面再加一条值为 red 的 background 声明"来改进浏览器兼容性。

初始代码（seed-contents）如下：

<style>
  :root {
    --red-color: red;
  }
  .red-box {

    background: var(--red-color);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>

问题在于：.red-box 的 background 只有一条声明，且完全依赖 var(--red-color)。在不支持 CSS 自定义属性的旧浏览器（课程原文以 Internet Explorer 为例）中，这条声明整体被视为无效而丢弃，.red-box 将回退到 background 的默认值（透明），红色方框消失。

解题步骤

官方 solution 只增加了一行，位置在 background: var(--red-color); 的紧邻前面：

<style>
  :root {
    --red-color: red;
  }
  .red-box {
    background: red;
    background: var(--red-color);
    height: 200px;
    width:200px;
  }
</style>
<div class="red-box"></div>

各浏览器的解析结果因此分化：

浏览器能力	解析过程	最终效果
不支持 CSS 变量（如 IE）	`background: red;` 合法，生效；`background: var(--red-color);` 不被识别，整条丢弃	红色背景
支持 CSS 变量（现代浏览器）	先应用 `red`，再被后面的 `var(--red-color)` 覆盖	红色背景（且颜色仍由变量集中控制）

两条声明在"支持的浏览器"里最终显示结果一致，但后者保留了"改一处变量、全局换色"的维护优势，前者则是为旧浏览器兜底——这正是该技巧"零成本兼容"的本质。

自动判分：从断言正则看允许的答案空间

该挑战的判分逻辑写在文档的 hints 段落中，值得作为"实现事实"细读：

const spacelessCode = __helpers.removeWhiteSpace(__helpers.removeCssComments(code));
assert.match(
  spacelessCode,
  /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
);

从源码结构看，它先剥掉注释与全部空白，再用一个严格锚定的正则验证规则块内容，可以确认三个判定要点：

回退声明必须紧邻在 background: var(--red-color); 之前，且 .red-box 内的属性顺序为 background → background → height → width，正则不允许其他属性插到两条 background 之间；
回退值必须等价于红色，被接受的写法有：命名色 red、完整十六进制 #ff0000、缩写十六进制 #f00、rgb(255,0,0)、rgb(100%,0%,0%)、hsl(0,100%,50%)。这六种形式恰好呼应了 basic-css 模块前文 "Use Hex Code / Use Abbreviated Hex Code / Use RGB values" 等挑战所教的同一颜色的多种表示法；
height:200px;width:200px 必须原样保留，说明判分针对的是"最小改动"，不允许顺手改写无关声明。

课程挑战文件的整体格式（frontmatter + --description-- / --instructions-- / --hints-- / --seed-- / --solutions-- 各段落）由课程校验层约束，例如 challenge-schema.js 中的 Joi 结构对挑战元数据做校验；本篇挑战文件的段落划分正是这一格式的典型实例。

容易混淆的另一种"回退"：`var()` 的第二个参数

上一篇挑战 Attach a Fallback value to a CSS Variable 教过这样的写法：

background: var(--penguin-skin, black);

它的文档中有一句明确的 Note：这个 fallback 不能用来提升浏览器兼容性，在 IE 上也不生效；它只在"变量本身未定义、拼写错误或处于失效状态（invalid at computed value time）"时被使用，更多是排错与调试手段。

两种手段的区别可以归纳为：

对比项	`var(--x, fallback)` 第二参数	重复声明式回退（本篇）
触发条件	变量名在当前作用域找不到/无效	浏览器不支持该特性（如 CSS 变量）
依赖浏览器支持 `var()` 吗	依赖	不依赖
在 IE 等旧浏览器中的作用	无（整条声明连同 `var()` 一起被丢弃）	前面那条纯声明照常生效
典型用途	调试、防止变量拼错导致样式失效	跨浏览器兼容兜底

因此针对"旧浏览器不支持某特性"的兼容目标，本篇的重复声明才是正确工具；两者并不互斥，实际项目中可以叠加使用。

适用前提与实践边界

适用前提：回退声明必须是旧浏览器能完整理解的合法声明（属性认识、值合法）。若回退值本身也用了新语法（例如回退值里再写 var()），则旧浏览器同样会丢弃它，兜底失效。
限制：重复声明会增加 CSS 体积；当需要回退的属性很多时，可考虑只对关键声明做兜底，或结合构建工具处理前缀等工程化手段（课程原文仅聚焦手写回退这一最基础、最可移植的形态）。
顺序敏感：回退声明必须在特性声明之前。写反了之后，旧浏览器取到的将是它唯一能识别的那条声明的位置关系被破坏，或新浏览器的变量声明被无效声明遮蔽的可能，都会导致兜底失效。
课程原文以 Internet Explorer 作为"不支持 CSS 变量"的代表浏览器来讲解；具体到你所支持的浏览器范围，请以自己项目的兼容性目标为准。