Interop 2025:Web 平台再上新台阶

发布时间:2025 年 2 月 13 日

在 2024 年 Interop 取得巨大成功后,该项目今天再次启动,并将在 2025 年聚焦于一系列新领域。虽然我们无法纳入今年收到的所有建议,但最终的列表涵盖了 Web 平台的各个方面,从 CSS 到与性能相关的功能。

2025 年的重点领域

  • 锚点定位
  • backdrop-filter
  • 核心网页指标
  • <details> 元素
  • 布局
  • 模块
  • Navigation API
  • 指针和鼠标事件
  • 移除变更事件
  • @scope
  • scrollend 个事件
  • Storage Access API
  • text-decoration
  • URLPattern
  • View Transition API
  • WebAssembly
  • Web 兼容性
  • WebRTC
  • 写入模式

此外,与往年一样,我们还将调查一系列领域。我们没有足够的信息或测试来将这些领域纳入重点领域,但该团队认为,应该先完成一些工作,使这些领域达到可纳入重点领域的阶段。

  • 无障碍功能测试
  • Gamepad API 测试
  • 移动测试
  • 隐私权测试
  • WebVTT

我们很高兴今年的项目将为 YouTube 平台带来所有这些功能和改进。与去年一样,该项目将使一系列功能成为“新基准”。本文将详细介绍该列表中的部分功能,并提供指向更多信息的链接。

您可以访问 wpt.fyi/interop-2025 查看 Interop 2025 信息中心,当某项功能达到“新的基础”级别时,也会显示在 webstatus.dev 上的 2025 年基准列表中。

项目开始时的得分:Interop:33、Investigations:0、Chrome Canary:91、Edge Dev:88、Firefox Nightly:52、Safari Technology Preview:55。
Interop 2025 信息中心(截至 2025 年 2 月 13 日)。

CSS 和界面

Interop 2025 中包含的许多功能都是您在 2024 年 CSS 状况调查问卷中标记为重要的功能。它们有助于您打造更美观、性能更出色的用户体验。

锚点定位

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

借助此功能,您可以将定位元素锚定到锚点,这在显示弹出式窗口时特别有用。

包含定位元素的锚点。

将此功能纳入基准后,您无需依赖第三方库,即可更轻松地创建界面。如需了解详情,请参阅我们的锚点定位文档,以及 MDN 上的 CSS 锚点定位

同一文档视图转换

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

今年还新增了视图转换(尤其是同一文档视图转换)和 view-transition-class CSS 属性。

如需详细了解视图转换,请参阅单页应用的同文档视图转换以及有关视图转换的 MDN 文档

backdrop-filter 属性

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

backdrop-filter 媒体资源自 2024 年 9 月起已成为“新基准”。借助它,您可以为内容创建背景效果。例如,模糊处理或创建您可能认为仅在图形应用中可用的效果。

尽管这些实现在大多数情况下是可互操作的,但您可以从 backdrop-filter 的失败测试 中看到,这些实现中存在 bug 和问题。虽然这些问题可能不会困扰到所有用户,但我们知道许多用户确实遇到了这些问题。如果能让此功能正常运行,我们将不胜感激。

<details> 元素

<details> 元素是一种可展开即可显示更多内容的披露 widget。<details> 元素本身是“广泛提供”基准。不过,我们最近添加了一些相关功能,这些功能让 <details> 变得更实用

  • ::marker::details-content CSS 伪元素。
  • 使用 content-visibility 切换内容,而不是 display
  • 使用网页中查找的匹配项自动展开 <details> 元素。
  • hidden="until-found" 属性,用于隐藏元素,直到用户使用浏览器的页面内搜索功能找到该元素,或直接通过跟随网址片段找到该元素。

CSS @scope at-rule

Browser Support

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

Source

借助 @scope at 规则,您可以将选择器的范围限定为 DOM 的子树,甚至可以在树中的上限和下限之间进行选择。例如,以下 CSS 仅选择类为 .card 的元素内的 <img> 元素。

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

在下例中,使用了上限和下限。只有当 <img> 元素位于类为 .card 的元素之间且位于类为 .card__content 的元素之外时,才会被选择。

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

如需查看有关如何使用 @scope 的更多示例,请参阅使用 CSS @scope at-rule 限制选择器的范围以及 MDN 上的 @scope 文档

scrollend 事件

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

如果没有 scrollend 事件,则无法可靠地检测滚动是否已完成。您能做的最好的事情是使用 setTimeout() 检查滚动是否已停止一段时间。这更像是滚动已暂停事件,而不是滚动已结束事件。

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

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

document.onscrollend = event => {
  // ...
}

如需查看更多示例,请参阅 Scrollend,一个新的 JavaScript 事件,以及 scrollend 的 MDN 文档

text-decoration 属性

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

text-decoration 属性是 text-decoration-linetext-decoration-colortext-decoration-styletext-decoration-thickness 的简写形式。它被视为“广泛可用”基准,但在 Safari 中,唯一可用的不带前缀的缩写属性是 text-decoration-line。我们将在 2025 年解决这个问题。

写入模式

CSS writing-mode 属性有多个可能的值,其中许多值旨在用于排列垂直显示的脚本。不过,有时您希望出于设计原因(而非语言支持原因)垂直排列文本。sideways-lrsideways-rl 值专为此目的而设计,但浏览器兼容性较差。此问题应该会在 2025 年内得到解决。

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

此外,还包含逻辑 CSS 属性 overflow-inlineoverflow-block。借助这些方法,无论编写模式如何,都可以控制内容溢出边框时的行为。

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

核心网页指标

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

Interop 2025 通过在浏览器中实现 LargestContentfulPaint APIEvent Timing API,包含 Largest Contentful Paint (LCP)Interaction to Next Paint (INP) 指标。Cumulative Layout Shift (CLS) 指标不在范围内。

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: not supported.
  • Safari: not supported.

Source

WebAssembly (Wasm)

借助 WebAssembly API,您可以加载 WebAssembly 代码(一种可移植的二进制指令格式)。借助它,您可以在浏览器中执行诸如运行整个博客应用(包括所有服务器要求)等操作!

今年,我们将重点改进以下功能:

  • JavaScript 字符串内置函数:用于使 WebAssembly 内置字符串函数镜像 JavaScript String API 的一部分,以便无需 JavaScript 粘合代码即可调用。
  • 可调整大小的缓冲区集成:将 WebAssembly 集成到使用可调整大小的缓冲区的 JavaScript 代码中。

功能移除

今年,该项目将从平台中移除。Mutation 事件已废弃,取而代之的是性能更出色且广泛可用的基准 Mutation Observer API。Chrome 在 Chrome 126 中移除了这些事件,而此重点领域旨在从所有浏览器中移除这些事件。

如需了解相关历史背景以及移除这些事件的原因,请参阅Chrome 将移除更改事件

了解详情

如需了解功能的完整列表,请参阅项目 README。此外,您还可以阅读其他参与 Interop 2025 计划的公司撰写的文章。