渐进增强与兼容

渐进增强先提供所有环境都能使用的结构和基础布局，再为支持新能力的环境增加视觉和交互增强。兼容策略不是“永远不用新特性”，而是明确哪些能力可以缺失、缺失时用户仍能完成什么任务。

.cards { display: flex; flex-wrap: wrap; gap: 1rem; }
@supports (display: grid) {
  .cards { display: grid; grid-template-columns: repeat(3, 1fr); }
}

@supports 检查语法和能力，不保证实现细节、性能或业务行为。应先让语义 HTML、基本阅读和键盘操作成立，再检测容器查询、subgrid 或新伪类。浏览器支持表需要固定目标环境和核对日期，不能用一个“现代浏览器”笼统代替。

实验与练习

为一个卡片布局提供 Flexbox 回退和 Grid 增强，用 @supports 控制入口。模拟不支持 Grid 的环境，确认内容仍按合理顺序显示；再记录哪些特性是增强，哪些是任务必需。

可运行微实验：能力检测与降级

先用 @supports 检测容器查询、cascade layers 或逻辑属性，再在支持与不支持路径提供同一内容的可用布局。用不同语言方向和不同容器宽度测试，记录哪些样式来自现代能力、哪些来自基础 CSS。

常见错误

• 只写现代规则，没有可用的基础布局。
• 用 @supports 检测到语法后就断言完整功能可用。
• 为了旧浏览器删除语义或键盘行为。

本章回顾

本章把变量、层、计算、容器查询、现代布局、逻辑属性和伪类放回兼容策略中。下一章进入存量维护，学习在旧页面里识别怪异模式、表格布局、浮动多栏和废弃标记。

进入存量维护篇

练习

1. 用最小输入复现“渐进增强与兼容”的成功路径，并记录可观察结果。
2. 改变一个时序、数据或宿主条件，解释结果为何变化。
3. 删除清理、校验或降级分支，写出能证明缺陷的断言。

查看本节答案