Web 平台新动向

Rachel Andrew

发布时间：2025 年 5 月 20 日

在 Google I/O 2025 大会的“Web 最新动态”主题演讲中，我们分享了所有 Baseline 公告，并介绍了今年已成为 Baseline 一部分的部分功能。对于 Web 和 Baseline 来说，今年都是精彩的一年。这篇博文汇总了所有提及的内容，并附上了所有链接，方便您了解详情。

Web 平台信息中心和 Web 功能

2024 年，我们宣布首次推出Web 平台信息中心，该信息中心使用 web-features 数据集，可让您探索属于 Baseline 的所有功能。

Web 功能数据现已完整，平台的所有功能都已整理与标注。随着每个月都有新功能加入 Baseline，数据也会随之更新，所有这些信息都会显示在信息中心内。

帮助您确定自己的 Baseline 目标的工具

虽然您可能会根据不断变化的“广泛可用的基准”来制定浏览器支持政策（例如 UK agency Clearleft），但您也可以采用基于基准年份的固定目标。现在，您可以将自己的用户数据与 Web 功能数据结合使用，确定最适合您的目标。

去年在 I/O 大会上，我们宣布 RUMvision 将在其产品中实现 Baseline，而这项集成现已正式推出。

由于它使用您的 RUM 数据，因此可帮助您根据这些数据（而非全球平均值）确定要采用哪个基准年。它还可以帮助您确定 Baseline Widely available 是否适合您。

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

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

这些只是不断增长的工具集中的两个工具，可帮助您将真实用户数据映射到 Baseline。

Web DX 社区组最近推出了Netlify 扩展程序，该扩展程序支持不同的 Baseline 年份，并且可在您的网站上广泛使用，帮助您确定要在构建工具中定位哪些内容。我们即将与 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 中以及您使用的所有其他工具中显示 Baseline 信息，那将更加有用。

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

browserslist-config-baseline

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

Chrome 团队与 WebDX CG 和社区成员一起发布了一款名为 browserslist-config-baseline 的新工具。这样，您就可以使用广泛可用的浏览器或基准年份等基准术语来配置 browserslist 目标。

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

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

代码检查器（ESLint 和 Stylelint）中的基准

借助代码检查器领域中的一些新工具，现在可以使用 Baseline 与代码检查器搭配使用，首先是 ESLint for CSS。

Baseline ESLint 具有 use-baseline 规则。您可以将此项设置为首选的 Baseline 目标，这样一来，当您使用任何比目标更新的功能时，系统都会发出警告。您可以选择如何解决这些警告：要么用基元替换该功能，要么抑制 lint 警告。如果您知道自己正在安全地使用前沿功能（例如，如果该功能是渐进式增强功能），那么抑制 lint 警告也是完全有效的解决方案。

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

对于 HTML linting 需求，还有一个名为 html-eslint 的社区插件。

Stylelint 官方支持名为 stylelint-plugin-use-baseline 的插件。此规则的行为与 CSS 的 ESLint 规则完全相同，但它在 Stylelint 上运行。

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

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

VS Code 和 JetBrains WebStorm 中的 Baseline

许多 IDE 长期以来都支持一种方式，即在编辑器中将鼠标悬停在某个功能上，即可查看受支持的浏览器版本列表。

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

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

现在，您可以将鼠标悬停在某项功能上，系统会告知您该功能是否被视为 Baseline 功能以及被视为 Baseline 功能的时间，或者是否有任何主要浏览器尚未完全实现该功能。

VSCode 中的悬停卡片，显示 Baseline 状态。
VSCode 悬停卡集成。

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

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

此外，我们还很高兴地宣布，JetBrains 正在其 WebStorm JavaScript 和 TypeScript IDE 中实现悬停卡片。

WebStorm 悬停卡集成。

Web 正在以前所未有的速度不断改进

我们希望 Baseline 能帮助您充分利用可互操作的 Web 正在以前所未有的速度不断改进这一事实。

您可以使用 Web 平台信息中心查看过去 12 个月（自 2024 年 Google I/O 大会以来）内已成为“Baseline 新近可用”的所有功能。

此外，还有许多功能已纳入 Interop 2025 项目，因此您可以放心地期待这些功能很快就会成为 Baseline 新增功能。如需详细了解所有包含的功能，请参阅 Interop 2025：又一年 Web 平台改进。

横向书写模式

Browser Support

  • Chrome: 132.
  • Edge: 132.
  • Firefox: 43.
  • Safari: 18.4.

我们已经看到一项功能进入“Baseline 新近可用”阶段，即 CSS writing-mode 属性的 sideways-rl 和 sideways-lr 值。如果您使用竖向书写模式纯粹是为了布局，那么很可能需要使用横向值。

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

锚点定位

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox Technology Preview: supported.
  • Safari: 26.

Source

锚点定位已在 Chrome 125 中提供。它提供了一种将元素的位置与锚点相关联的方法，例如在通过按钮打开工具提示时。

该功能现已纳入 Interop 2025，因此我们应该会在今年看到它加入 Baseline。

核心网页指标：LCP 和 INP

LCP API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API（适用于 INP）

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: 144.
  • Safari: not supported.

Source

网页指标可以帮助您量化网站的用户体验，并发现提升的机会。“网页指标”计划旨在简化这一局面，并帮助网站专注于最重要的指标，即核心网页指标。

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

对 <details> 元素进行了增强

<details> 元素本身已达到“Baseline 广泛可用”阶段。它已纳入 Interop 2025，因为有许多功能可让使用 <details> 的披露微件更加实用。

<details> 元素包含一个 <summary> 元素，该元素是 <details> 元素折叠时在网页上可见的部分。<summary> 之外是 <details> 元素的内容，在用户点击摘要之前，这些内容处于隐藏状态。

在 Interop 2025 期间实现互操作性的一项功能是使用 content-visibility 而不是 display 隐藏内容，这意味着如果未展开，内容将根本不会呈现。

Interop 2025 工作还包括 ::marker 伪元素。借助 ::marker 伪元素，您可以设置 <summary> 元素的展开三角形的样式。

Browser Support

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 49.
  • Safari: not supported. 

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

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

Browser Support

  • Chrome: 131.
  • Edge: 131.
  • Firefox: 143.
  • Safari: 18.4.

Source

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

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

此外，还有一些不错的改进，例如自动展开包含网页搜索匹配项的 <details> 元素，以及将 HTML hidden 属性的 until-found 值引入 Baseline Newly available。此属性会隐藏元素，直到通过浏览器的“在页面中查找”搜索功能找到该元素，或者通过跟踪网址片段直接导航到该元素。

CSS @scope

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

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

例如，如果您只想定位具有 .card 类的元素内的 <img> 元素，则 .card 将成为范围界定根。

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

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

scrollend

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari Technology Preview: supported.

Source

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

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

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

document.onscrollend = event => {…}

如需查看更多示例，请参阅滚动结束事件 (scrollend)，一项新的 JavaScript 事件。

同文档视图过渡

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 144.
  • Safari: 18.

Source

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

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

纳入 Interop 2025 的功能不会是今年纳入 Baseline 的唯一功能，但它们被纳入项目表明，这些功能是优先考虑的对象，很快就会纳入 Baseline。

我们才刚刚开始

对于 Baseline 来说，今年是令人兴奋的一年，我们取得了长足的进步，与去年的公告相比，已经有了很大的变化。我们现在已完成 Web 功能数据回填。这为开发者工具的创建打开了方便之门。我们才刚刚开始这项工作，如果您有产品或开源工具可以从纳入这些数据中受益，我们非常期待您的反馈。

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