Web Platform Baseline 与浏览器兼容
用统一基线判断 HTML、CSS 和 Web API 是否能在主流浏览器中稳定使用。
先用白话理解
它到底是什么？
同一段网页代码可能在不同浏览器中表现不同。Baseline 用一个更容易沟通的标准，说明某项 Web 能力是否已经得到主流浏览器广泛支持。
学习判断
现在适不适合学？
满足左侧情况可以开始；如果更符合右侧情况，先补基础通常更省时间。
- 需要决定新的 CSS 或 Web API 能否用于生产项目
- 负责移动端、跨浏览器或企业环境兼容
- 希望建立基于数据而不是经验的兼容策略
- 还没有 HTML 和 CSS 基础
- 项目没有明确用户浏览器范围
- 只是想背诵浏览器版本，而不是解决真实兼容问题
学习前提
开始之前先会这些
- 知道 Chrome、Safari、Firefox 使用不同浏览器引擎
- 掌握 HTML、CSS 基础
- 了解渐进增强和功能检测的基本想法
核心概念
先抓住这三个重点
新可用
某项能力已在主要浏览器的最新版本中支持，但用户覆盖可能还不够广。
广泛可用
能力已经稳定存在较长时间，更适合作为常规项目基线。
渐进增强
先提供所有浏览器可用的基础体验，再为支持新能力的环境增加增强效果。
最小示例
用功能查询提供降级样式
基础布局先使用 Flex，支持 Grid 的浏览器再获得增强布局。
Web Baseline可以复制运行
.layout { display: flex; }
@supports (display: grid) {
.layout { display: grid; grid-template-columns: repeat(3, 1fr); }
}动手练习
按这个顺序做一遍
不要只复制最小示例。下面三项能独立完成，说明你已经开始掌握这项技术。
- 01
查询三个常用 CSS 能力的 Baseline 状态
- 02
为一个新功能编写 @supports 降级方案
- 03
根据项目用户数据写一份浏览器支持说明
初学者常见误区
- 只看自己的 Chrome 能运行就认为所有用户都支持。
- 为了极少量旧浏览器牺牲大量现代体验。
- 只依赖版本号，不结合真实用户浏览器数据。
学完后的检查清单
- 会在 MDN 和 Can I Use 查询兼容信息
- 能为关键功能准备降级路径
- 知道项目支持哪些浏览器及其原因
官方资料