写代码之前先知道哪些用户会看不到
一个 CSS 属性或 Web API 在自己的最新版 Chrome 中正常,不代表 Safari、Firefox、旧版 Edge 或移动浏览器都支持。Can I Use 通过浏览器版本表展示支持、部分支持和不支持状态,并附带备注、已知问题和全球使用率。
搜索属性名、API 名称或常见关键词即可进入详情。例如要使用 CSS Grid、WebP、容器查询或某个 JavaScript API,可以快速判断从哪个版本开始可用。颜色表只是入口,备注往往比绿色和红色更重要,因为“部分支持”可能缺关键行为或需要前缀。
兼容性决策不能只看全球百分比
全球使用率与自己网站的访客结构可能不同。企业内网可能长期使用固定浏览器,某些地区 iOS 占比更高,老设备用户也可能是核心客户。先从网站统计中确定最低支持范围,再用 Can I Use 判断功能是否可以直接启用。
- 核心功能采用渐进增强,基础流程在旧浏览器仍可完成;
- 视觉增强可以允许差异,不必为每个像素引入大型补丁;
- 需要 polyfill 时评估体积、维护状态和实际覆盖版本。
“支持”不等于所有实现都没有问题
浏览器表反映功能级别,无法覆盖设备性能、输入法、辅助技术和组合使用时的缺陷。发布前仍应在真实目标浏览器测试键盘操作、触摸、字体、表单和关键交互。自动化兼容测试能减少回归,但不能替代人工体验。
某些功能依赖 HTTPS、用户授权、特定硬件或安全上下文,即使浏览器版本显示支持,也可能因环境条件无法工作。阅读页面备注并回到标准与浏览器文档确认调用方式,可以避免误判。
把它加入开发流程
技术方案评审时记录关键功能的兼容链接和降级策略,代码审核时检查是否超出支持范围,上线后根据真实流量逐步淘汰旧方案。这样 Can I Use 不只是开发者临时查询页,而会成为产品支持范围的可追溯依据。
