继 Interop 2022 和 Interop 2023 的成功之后,我们很高兴再次有机会与所有主要浏览器供应商和其他相关利益方合作。我们的共同目标是增强 Web 平台之间的互操作性,从而简化开发人员的工作并丰富互联网用户的整体体验。
Interop 的核心是一系列全面的测试和基准,旨在根据我们对 Web 标准的共同承诺,评估各个浏览器的合规性。最终,Interop 致力于消除浏览器之间的不一致性,并在行业内培养统一的愿景。
对于 Interop 2024,有一个公开的提案流程来获取最初的功能列表。根据该列表,所有各方共同努力创建了 2024 年的重点领域列表。以下列表包括我们希望在今年年底看到所选测试 100% 通过的领域。
2024 年的所有重点领域
Interop 2024 包括 12 个新的重点领域,以及从 2023 年延续下来的 5 个领域,其中一些修复工作仍在进行中。这些领域是
- 无障碍访问
- CSS Nesting
- 自定义属性
- Declarative Shadow DOM
- font-size-adjust
- WebSocket 的 HTTPS URL
- IndexedDB
- 布局
- 指针和鼠标事件
- Popover
- 相对颜色语法
- requestVideoFrameCallback
- 滚动条样式
- @starting-style 和 transition-behavior
- 文本方向
- text-wrap: balance
- URL
要查看所有重点领域的详细信息,请访问 Interop 2024 仪表板,其中显示了功能的详细信息和所需的工作,以及每个浏览器的当前得分。在本文的其余部分,你可以了解 Chrome 需要做最多工作以达到 100% 的一些领域。
嵌套
CSS 嵌套模块定义了一种用于嵌套选择器的语法,提供将一个样式规则嵌套在另一个样式规则内的能力,其中子规则的选择器相对于父规则的选择器。
CSS 嵌套与 CSS 预处理器(如 Sass)的不同之处在于,它是由浏览器解析的,而不是由 CSS 预处理器预编译的。
CSS 嵌套有助于提高 CSS 样式表的可读性、模块化和可维护性。它还有助于减小 CSS 文件的大小,从而减少用户下载的数据量。
虽然所有浏览器都支持 CSS Nesting,但由于规范的更改,实现上存在一些差异。在 Interop 2024 期间,目标是确保所有浏览器都遵循当前的规范。
了解更多关于 CSS Nesting 的信息,并了解规范的一项关键更新,该更新支持裸元素标签名称的嵌套。
text-wrap: balance
CSS text-wrap 属性的 balance 值向浏览器指示你希望它平衡文本行。它通常用于标题或其他短文本部分,以避免排版孤行。


浏览器对该属性的各种长写和简写版本的支持有所不同。在 Interop 2024 期间,我们的目标是使这些版本具有互操作性。
平衡标题和其他短文本部分是开发人员经常要求的功能,在 CSS text-wrap: balance、文章 an end to typographic widows on the web 或 CSS Text Balancing with text-wrap: balance 中了解更多信息。
WebSocket 的 HTTP(s) URL
WebSocket 构造函数最初需要 ws:
和 wss:
URL,从而阻止了相对 URL 的使用以及由此产生的变通代码。
规范已更新为允许 http(s) 方案,因此也允许相对 URL。这些 URL 被规范化为 ws:
和 wss:
。在 Interop 2024 期间,我们将更新我们的实现以支持 http(s) 方案。
相对颜色语法
相对颜色语法在 CSS Color 5 规范中定义,并提供了一种在 CSS 中操作颜色的方法。例如,使颜色变暗、变亮或降低饱和度。
相对颜色语法大致具有互操作性,但浏览器尚未实现 currentcolor
关键字;这些测试包含在 Interop 2024 中。
在 CSS 相对颜色语法 中了解你可以使用此功能做的所有事情。
Interop 2024 仪表板
与往年一样,实验性和稳定浏览器版本的当前得分将发布在仪表板上,因此你可以查看得分的进展情况。

我们非常高兴看到今年在所有重点领域可以取得多大的改进。