发布时间: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 年基准列表中。

CSS 和界面
Interop 2025 中包含的许多功能都是您在 2024 年 CSS 状况调查问卷中标记为重要的功能。它们有助于您打造更美观、性能更出色的用户体验。
锚点定位
借助此功能,您可以将定位元素锚定到锚点,这在显示弹出式窗口时特别有用。
将此功能纳入基准后,您无需依赖第三方库,即可更轻松地创建界面。如需了解详情,请参阅我们的锚点定位文档,以及 MDN 上的 CSS 锚点定位。
同一文档视图转换
今年还新增了视图转换(尤其是同一文档视图转换)和 view-transition-class
CSS 属性。
如需详细了解视图转换,请参阅单页应用的同文档视图转换以及有关视图转换的 MDN 文档。
backdrop-filter
属性
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
借助 @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
事件
如果没有 scrollend
事件,则无法可靠地检测滚动是否已完成。您能做的最好的事情是使用 setTimeout()
检查滚动是否已停止一段时间。这更像是滚动已暂停事件,而不是滚动已结束事件。
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
借助 scrollend
事件,浏览器会为您完成所有这些复杂的评估。
document.onscrollend = event => {
// ...
}
如需查看更多示例,请参阅 Scrollend,一个新的 JavaScript 事件,以及 scrollend
的 MDN 文档。
text-decoration
属性
text-decoration
属性是 text-decoration-line
、text-decoration-color
、text-decoration-style
和 text-decoration-thickness
的简写形式。它被视为“广泛可用”基准,但在 Safari 中,唯一可用的不带前缀的缩写属性是 text-decoration-line
。我们将在 2025 年解决这个问题。
写入模式
CSS writing-mode
属性有多个可能的值,其中许多值旨在用于排列垂直显示的脚本。不过,有时您希望出于设计原因(而非语言支持原因)垂直排列文本。sideways-lr
和 sideways-rl
值专为此目的而设计,但浏览器兼容性较差。此问题应该会在 2025 年内得到解决。
此外,还包含逻辑 CSS 属性 overflow-inline
和 overflow-block
。借助这些方法,无论编写模式如何,都可以控制内容溢出边框时的行为。
核心网页指标
网页指标可以帮助您量化网站的用户体验,并发现提升的机会。Web Vitals 计划旨在简化环境,帮助网站专注于最重要的指标:Core Web Vitals。
Interop 2025 通过在浏览器中实现 LargestContentfulPaint API 和 Event Timing API,包含 Largest Contentful Paint (LCP) 和 Interaction to Next Paint (INP) 指标。Cumulative Layout Shift (CLS) 指标不在范围内。
LCP API
Event Timing API(适用于 INP)
WebAssembly (Wasm)
借助 WebAssembly API,您可以加载 WebAssembly 代码(一种可移植的二进制指令格式)。借助它,您可以在浏览器中执行诸如运行整个博客应用(包括所有服务器要求)等操作!
今年,我们将重点改进以下功能:
- JavaScript 字符串内置函数:用于使 WebAssembly 内置字符串函数镜像 JavaScript String API 的一部分,以便无需 JavaScript 粘合代码即可调用。
- 可调整大小的缓冲区集成:将 WebAssembly 集成到使用可调整大小的缓冲区的 JavaScript 代码中。
功能移除
今年,该项目将从平台中移除。Mutation 事件已废弃,取而代之的是性能更出色且广泛可用的基准 Mutation Observer API。Chrome 在 Chrome 126 中移除了这些事件,而此重点领域旨在从所有浏览器中移除这些事件。
如需了解相关历史背景以及移除这些事件的原因,请参阅Chrome 将移除更改事件。
了解详情
如需了解功能的完整列表,请参阅项目 README。此外,您还可以阅读其他参与 Interop 2025 计划的公司撰写的文章。