此页面由 Cloud Translation API 翻译。

Web 平台新动向

Rachel Andrew

发布时间：2025 年 5 月 20 日

在 2025 年 Google I/O 大会的“Web 平台新变化”主题演讲中，我们分享了所有基准版功能的相关公告，并简要介绍了今年加入基准版的部分功能。今年是 Web 和 Baseline 的丰收年，本篇文章汇总了我们在这些活动中提到的所有内容，并提供了所有相关链接，以便您进一步了解。

Web 平台信息中心和 web-features

2024 年，我们宣布初步推出网站平台信息中心，该信息中心使用 Web 地图项数据集，可让您探索基准组成部分的所有地图项。

Web 地图项数据现已完成，其中包含该平台的所有地图项。随着每个月都有新功能加入基准组，数据也会随之更新，所有这些信息都会显示在信息中心内。

帮助您发现自己的基准目标的工具

虽然您可以根据“广泛提供”基准的动态目标制定浏览器支持政策（例如英国代理机构 Clearleft），但也可以根据基准年采用固定目标。现在，您可以将自己的用户数据与网站地图项数据结合使用，找出最适合您的目标对象。

去年在 I/O 大会上，我们宣布 RUMvision 将在其产品中实现基准，此集成现已发布。

由于该工具使用的是您的 RUM 数据，因此可帮助您根据这些数据（而非全球平均值）确定要采用的基准年份。这还有助于您了解“广泛提供的基准”是否适合您。

您还可以使用 Google Analytics 数据，通过新的 Google Analytics 基准检查工具清楚地了解有多少用户支持每个基准目标。

包含支持百分比的基准年份列表。 — Google Analytics 基准检查工具的输出。

这只是我们不断推出的众多工具中的两个，可帮助您将真实用户数据映射到基准。

Web DX 社区团队最近发布了适用于 Netlify 的扩展程序，该扩展程序会显示对不同基准年份的支持情况，并在您的网站上显示“广泛可用”状态，以帮助您确定在构建工具中要定位到什么。我们即将推出与 Cloudflare 的 Observatory RUM 产品和 Contentsquare 的集成。

将数据与您自己的工具集成

Web 地图项数据是开放的，可供您进行自己的集成。我们正在努力让这变得更容易。

使用 Web 平台信息中心 API，或直接从 npm 软件包使用 Web 地图项数据。

现在，您可以使用 W3C WebDX 社区群组的 baseline-browser-mapping 模块将浏览器版本映射到基准目标。此模块可在服务器端 JavaScript 环境中使用，也可以通过下载每天刷新的 JSON 或 CSV 文件从代码库中使用。

这些数据不仅包含核心基准浏览器集的映射，还包含 Samsung Internet、Opera、UC 浏览器和 Android WebView 等下游浏览器的映射。

了解基准目标是否支持功能

基准信息现已在大多数 MDN 和“Can I Use”页面中提供，您还可以在 Web 平台信息中心以及 web.dev 和 CSS Tricks 上的文章中找到这些信息。不过，您需要自行查找支持服务。如果在您编写代码时，IDE 中显示基准信息，并且您使用的所有其他工具中也显示基准信息，将会非常有用。

我们很高兴地通知您，许多关键工具现在都内置了基准支持，或者可以轻松集成。

`browserslist-config-baseline`

Babel 和 PostCSS 等许多工具都使用 browserslist 来确定要支持哪些浏览器。

Chrome 团队与 WebDX CG 和社区成员一起，共同发布了一款名为 browserslist-config-baseline 的新工具。这样，您就可以使用基准术语（例如“广泛提供”或“基准年份”）配置 browserslist 目标。

这样一来，任何采用 browserslist 目标的工具现在都可以用基准来表示。

如需了解详情，请参阅将基准与 browserslist 搭配使用。

lint 工具的基准 - ESLint 和 Stylelint

我们最近在 lint 工具领域推出了一些新工具，从适用于 CSS 的 ESLint 开始，让您可以将基准与 lint 工具搭配使用。

基准 ESLint 具有 use-baseline 规则。您可以将其设置为首选的基准目标，当您使用比目标版本更高版本的任何功能时，系统会向您发出警告。您可以选择如何解决这些警告：通过将该功能替换为基元，或通过抑制 lint 警告。如果您知道自己正在安全地使用前沿功能（例如渐进式增强功能），抑制 lint 警告是一种完全有效的解决方案。

默认情况下，如果在 @supports 块中使用了较新功能，ESLint 不会发出警告，因为不受支持的浏览器无论如何都不会对其进行评估。

如需进行 HTML lint 检查，您还可以使用名为 html-eslint 的社区插件。

Stylelint 官方支持名为 stylelint-plugin-use-baseline 的插件。此规则的行为与适用于 CSS 的 ESLint 规则完全相同，但它是通过 Stylelint 运行的。

许多 lint 工具还提供 IDE 插件，因此您可以在编码时通过波浪线下划符立即获得有关基准状态的反馈。

VSCode 中使用的 ESLint 插件，显示基准目标之外的功能的下划线。 — VSCode 中使用的 ESLint 插件。

VS Code 和 JetBrains WebStorm 中的基准

许多 IDE 早已支持一种方法，即在编辑器中将鼠标悬停在某项功能上，然后查看受支持的浏览器版本列表。

但是，很难理解该功能是否真的安全可用，您需要在脑中解析该列表中是否缺少任何主要浏览器，以及该浏览器版本的新旧程度。

为了解决此问题，我们与数百万 Web 开发者使用的最流行 IDE VS Code 合作，将基准数据直接集成到这些悬停卡片中。

现在，您只需将鼠标悬停在某项功能上，系统就会告诉您该功能是否被视为基准功能以及基准期有多长，或者是否有任何主要浏览器尚未完全实现该功能。

支持的功能包括 CSS 属性、HTML 元素和 HTML 属性。如需了解详情，请参阅 Visual Studio Code 现已支持基准。

这项集成意味着，任何基于 VS Code 的 IDE 也将受益于这些悬停卡片。

我们还可以宣布，JetBrains 将在其 WebStorm JavaScript 和 TypeScript IDE 中实现悬停卡片。

网络的改进速度比以往更快

我们希望基准测试能够帮助您充分利用互操作 Web 技术发展速度比以往更快这一事实。

您可以使用网站平台信息中心查看在过去 12 个月（自 2024 年 Google I/O 大会起）内成为“基准新功能”的所有功能。

此外，还有一些功能已包含在 Interop 2025 项目中，因此您可以确信它们很快就会成为 Baseline 新功能。您可以参阅 Interop2025：又一年 Web 平台改进，了解其中包含的所有功能。

横向书写模式

Browser Support

我们已经看到一项功能变为“新推出的基准”，即 CSS writing-mode 属性的 sideways-rl 和 sideways-lr 值。如果您使用竖屏写入模式只是出于布局目的，则可能需要使用横向值。

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

锚点定位

Browser Support

Source

锚点定位已在 Chrome 125 中发布。借助它，您可以将元素的位置与锚点相关联，例如使用按钮打开提示时。

该功能现已纳入 2025 年 Interop 大会，因此我们应该会在今年将其纳入基准版。

核心 Web 指标：LCP 和 INP

LCP API

Browser Support

Source

Event Timing API（适用于 INP）

Browser Support

Source

网页指标可以帮助您量化网站的用户体验，并发现提升的机会。Web Vitals 计划旨在简化环境，帮助网站专注于最重要的指标：Core Web Vitals。

Interop 2025 通过在各浏览器中实现 LargestContentfulPaint API 和 Event Timing API，包含 Largest Contentful Paint (LCP) 和 Interaction to Next Paint (INP) 指标。

改进了 `<details>` 元素

<details> 元素本身已广泛提供基准版本。由于有许多功能可让使用 <details> 的披露 widget 变得更实用，因此它已纳入 Interop 2025 中。

<details> 元素包含 <summary> 元素，该元素是 <details> 元素收起后在页面上显示的部分。<summary> 之外是 <details> 元素的内容，在用户点击摘要之前，此内容处于隐藏状态。

在 2025 年 Interop 大会期间实现互操作性的一个方面是，使用 content-visibility（而非 display）隐藏内容，这意味着，如果未展开，系统将完全不渲染内容。

::marker 伪元素也是 Interop 2025 工作计划的一部分。借助 ::marker 伪元素，您可以设置 <summary> 元素的展开三角形的样式。

Browser Support

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

然后是另一个伪元素 - ::details-content。

Browser Support

Source

::details-content 表示内容，即 details 元素中可展开和收起的部分，可让您为其设置样式。

[open]::details-content {
  border: 5px dashed hotpink;
}

我们还进行了一些不错的改进，例如使用页面内查找匹配项自动展开 <details> 元素，以及将 HTML hidden 属性的 until-found 值设为“新推出的基准”。这会隐藏元素，直到用户使用浏览器的“在网页中查找”功能找到该元素，或直接通过跟随网址片段找到该元素为止。

CSS `@scope`

Browser Support

Source

借助 CSS @scope 规则，您可以限制选择器的覆盖范围。通过使用 @scope 设置作用域根，at-rule 中嵌套的任何样式规则都仅适用于该 DOM 树。

例如，如果您只想定位到类为 .card 的元素内的 <img> 元素，则 .card 将成为作用域根。

@scope (.card) {
    img {
        border-color: green;
    }
}

如需了解详情，请参阅使用 CSS @scope at-rule 限制选择器的范围。

`scrollend`

Browser Support

Source

scrollend 是另一项可降低复杂性并改进滚动界面的功能。如果没有 scrollend 事件，则无法可靠地检测滚动是否已完成。

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

借助 scrollend 事件，浏览器会为您完成所有这些复杂的评估。

document.onscrollend = event => {…}

如需查看更多示例，请参阅 Scrollend，一种新的 JavaScript 事件。

同一文档视图转换

Browser Support

Source

最后但同样重要的是，视图转换是 Interop 2025 的一部分。这项工作涉及同一文档视图转换，因此也涉及单页应用和视图转换类。

请关注 Interop 2025 信息中心，了解该项目在年内的发展情况。

今年纳入基准版的功能不仅仅包括 Interop 2025 中包含的功能，但这些功能被纳入项目中，这是一个非常好的信号，表明这些功能是优先考虑的，并且即将推出。

我们才刚刚开始

过去一年，基准测试取得了令人振奋的进展，我们在去年宣布推出基准测试后，已经取得了长足的进步。现在，我们已完成 Web 地图项数据的回填。这为开发者工具的创建打开了闸门。我们才刚刚起步，如果您有产品或开源工具可以通过添加此类数据受益，欢迎与我们联系。

请密切关注 web.dev，我们会继续发布有关新工具的公告以及教程，帮助您充分利用 Web 提供的一切服务。

Web 平台新动向

Web 平台信息中心和 web-features

帮助您发现自己的基准目标的工具

将数据与您自己的工具集成

了解基准目标是否支持功能

browserslist-config-baseline

lint 工具的基准 - ESLint 和 Stylelint

VS Code 和 JetBrains WebStorm 中的基准

网络的改进速度比以往更快

横向书写模式

锚点定位

核心 Web 指标：LCP 和 INP

LCP API

Event Timing API（适用于 INP）

改进了 <details> 元素

CSS @scope

scrollend

同一文档视图转换

我们才刚刚开始

`browserslist-config-baseline`

改进了 `<details>` 元素

CSS `@scope`

`scrollend`