如何选择适合你的 Web 兼容性目标

作者:林语者 分类:工程代码

Baseline 指南:如何选择适合你的 Web 兼容性目标

发布日期:2025 年 5 月 20 日

当 Web 平台功能在所有浏览器中实现后,它将进入 Baseline Newly available 状态。30 个月后,该功能将变为 Baseline Widely available。这是大多数网站可以放心采用该功能而无需担心兼容性问题的阈值。本指南将介绍如何使用 Baseline,以及如何利用网站用户数据选择合适的 Baseline 目标。

什么是 Baseline 目标

Baseline 目标是开发者根据 Baseline 状态可以选择的 Web 功能组。Baseline 目标有两种类型:移动目标和固定目标。

移动目标(如 “Baseline - Widely available” 和 “Baseline - Newly available”)包含的功能集会随时间变化。如果你希望在每次新浏览器版本发布时自动更新支持的功能集,移动目标是一个合适的选择。

注:例如,如果在 2025 年 5 月开发网站时选择 “Baseline Widely available” 作为目标,那么容器查询等功能将不在目标范围内。但如果在 2025 年 11 月重新开始工作,容器查询将成为目标功能,可供使用。

固定目标是指功能集随时间推移保持不变的基准目标,通常基于日历年。例如,”Baseline 2023” 是一个固定目标,包含 2023 年新进入 Baseline 的 Web 功能集。Baseline 2023 不会包含 2023 年之后才进入 Baseline 的功能,这意味着其功能集是固定的。

固定目标适合对可预测性和确定性要求较高的场景,但随着时间的推移它们可能会变得过时。因此,如果使用固定目标,建议定期重新评估目标选择。

为什么需要选择目标

兼容性顾虑常常导致 Web 功能采用延迟,从而限制了 Web 潜力的充分发挥。Baseline 不仅明确了浏览器对功能的支持情况,还解决了“何时可以使用特定功能”的问题。通过选择反映用户需求和项目要求的目标,你可以在该目标组内放心使用功能,无需逐一检查每个功能。

使用数据选择 Baseline 目标

选择合适的 Baseline 目标应尽可能基于数据驱动的决策。拥有数据支持后,你能够更轻松、更明智地确定应该选择哪个目标。

如果你拥有网站的实时用户监控(RUM)数据,可以查看 Baseline 目标如何与你的用户群体匹配。例如,使用 Google Analytics 时,可以通过 Google Analytics Baseline Checker 免费获取这些信息。

要使用此功能,需要在 Google Analytics 中创建新的数据探索报告,添加指标和维度,然后将报告导出为 TSV 文件。具体步骤可参考相关指南。将 TSV 文件导入检查器后,你将看到类似以下的输出:

(示例输出:工具将实际用户支持按 Baseline 目标分段显示,较旧的目标通常拥有更高的用户支持率)

其他工具也开始实现 Baseline 支持,使你能够动态查看支持特定目标的用户比例。例如,RUMvision 提供了显示各 Baseline 年支持用户百分比的仪表板。

如果分析或 RUM 提供商尚未支持 Baseline 目标报告怎么办?

如果你使用的分析或 RUM 工具尚未提供 Baseline 目标报告,但拥有浏览器版本数据,可以使用 baseline-browser-mapping 模块的浏览器版本映射功能与真实世界数据结合。该模块提供 JavaScript 函数 getAllVersions(),将浏览器名称和版本映射到广泛可用的 Baseline 年份和支持状态。这些映射可以作为数组、键控对象或 CSV 提供。例如,Google Analytics Baseline Checker 就是使用此模块将分析数据与 Baseline 目标结合的。

该函数的输出也可作为每日更新的托管 JSON 或 CSV 文件使用。all_versions_with_supports.csv 文件包含以下字段,可与分析提供商的浏览器版本数据进行匹配:

  • browserbaseline-browser-mapping 中使用的浏览器名称
  • version:浏览器版本号(仅主版本或主次版本号)
  • year:此浏览器版本支持的 Baseline 年份功能集
  • supports:支持的功能集状态(widelynewly
  • release_date:浏览器版本的发布日期(如可用)
  • engine:浏览器引擎名称
  • engine_version:浏览器实现的 Chromium 版本

此文件会随着新浏览器版本的发布和各浏览器支持状态的更改而频繁更新。建议每日更新数据。

如果没有真实用户支持数据怎么办?

在某些情况下,你可能无法获取 Baseline 功能的真实用户数据。幸运的是,使用 RUM 存档分析数据可以获得各 Baseline 目标支持情况的概览,甚至可以按国家进行筛选。

虽然这些数据并非特定于你的网站用户,但它们提供了有用的通用参考信息:

  • 较新的 Baseline 目标(如今年或去年)可能拥有最少的用户支持,但与其他目标一样,支持率会随时间推移而增长。
  • 较旧的 Baseline 目标(特别是 “Baseline Widely available”)通常得到充分支持。如果难以决定,选择 “Widely available” 作为目标是一个稳妥的选择。
  • 即使是超过 30 个月广泛可用期的旧 Baseline 目标,也能提供良好的支持。

即使选择了 5 年前的 Baseline 目标,你仍然可能采用尚未使用的功能。在最佳情况下,这些功能可能已经在使用,但使用了不必要的 polyfill。

如何在项目中应用选择的 Baseline 目标?

Browserslist 是常用的目标浏览器配置工具,被打包器和相关工具(如 Babel 和 PostCSS)用来判断是否需要转换特定代码或添加 polyfill。

现在 Baseline 已与 Browserslist 集成,你可以将 Baseline 目标作为有效的 Browserslist 查询进行指定。这样,项目中的工具就会根据选定的目标来转换代码。详细信息请参考“在 Browserslist 中使用 Baseline”。

如何处理不满足 Baseline 目标的功能?

选择 Baseline 目标后,你可能会发现想使用的某些功能不在目标范围内。Baseline 不会告诉你具体应该怎么做,是否使用这些功能取决于你创建的网站类型和目标用户群体。

例如,电商或 B2B 网站可能希望降低支持阈值,并愿意处理用户可能遇到的兼容性问题,而政府网站可能需要设置更高的支持阈值。这里的一个重要经验法则是:并非所有 Web 功能都以相同的方式“失效”。

以下是一种有用的功能分类方法:

  • 功能增强:在不支持的浏览器中使用该功能不会破坏体验,虽然体验可能有所降级,但用户不太可能注意到。例如:loading="lazy"
  • 附加功能:提供可感知的附加价值,如页面样式更改或某些功能。如果不受支持,用户可能不会注意到差异。例如:Subgrid。
  • 关键功能:如果不受支持,用户体验会严重受损,甚至完全无法使用。例如:File System Access API 作为核心必需功能使用。

注:英国机构 Clearleft 使用 “Widely available” 作为目标,但在完全排除某项新功能之前,会先考虑其是否可以作为渐进增强使用。

另外,你可能会发现某些目标外的功能实际上比你预期的支持更好。你可以了解支持特定功能的用户比例。在 Can I Use 上,可以基于分析数据查看各个功能的支持情况。RUMvision 也提供了功能级别的数据,可以根据需要进行深入分析。

通过这种方式,Baseline 目标可以帮助减少需要仔细考虑的功能数量。目标内的所有功能都可以放心使用,无需担心。如果有一两个目标外的功能特别有用,你可以使用工具进行更深入的分析,决定是否使用 polyfill 或作为渐进增强功能。

总结

每个 Web 应用程序都有不同的需求:从能够容忍一定程度兼容性问题的电商网站,到需要尽可能覆盖更多用户的政府网站。这些计算需要你自己完成。Baseline 的目的不是告诉你应该对新的 Web 功能做出什么决定,而是告诉你应该如何做出这些决定。

评论

发表评论

正在加载评论...