随着 Interop 2024，网络变得更好

2024 年 2 月 1 日

作者：Jen Simmons

Web 真是太棒了。它使数十亿人能够轻松协作、学习和连接，因为它被有意设计为可在截然不同的设备上运行。

作为一名 Web 开发者，你的职责是确保你的项目在所有浏览器和所有用户上都能正常工作——这可能很难做到。当浏览器对你使用的 Web 技术有相同的实现时，这项工作就会容易得多。

相同的实现是通过 Web 标准化过程来实现的，在此过程中，人们共同协作编写极其详细的技术文档，定义每项新的 Web 技术——甚至细致到网站错误应如何运作。

检查浏览器是否遵循 Web 标准的一种方法是通过自动化测试。有几个共享的此类测试仓库，包括 Web 平台测试。WPT 包含超过 180 万个测试，其中超过 95% 在所有主流浏览器中通过。

Interop 项目

Interop 项目旨在通过鼓励浏览器引擎团队更深入地研究特定重点领域来提高互操作性。现在，在第三年，Apple、Bocoup、Google、Igalia、Microsoft 和 Mozilla 汇集了我们集体的专业知识，并为 2024 年选择了一组特定的自动化测试。

一些选定的技术已经存在了很长时间。其他领域则是全新的。通过选择开发者多年来因其错误而避免使用的一些优先级最高的功能，我们可以让它们达到最终可以被信任的程度。通过选择令人兴奋的新技术，我们可以确保它从一开始就具有互操作性。

为了更好地了解未来互操作性的发展方向，我们首先来看看 Interop 2023 的影响。

Interop 2023

Interop 2023 比 Interop 2022 取得了更大的成功。2023 年 1 月，在所有三个主流浏览器引擎（已发布给用户：桌面 Linux 上的 Chrome 和 Firefox，以及 macOS Monterey 上的 Safari）中，所选测试的通过率为 48%。一年后，该通过率升至 95%（桌面 Linux 上的 Chrome Dev 和 Firefox Nightly，以及 macOS Ventura 上的 Safari 技术预览版）。

Screenshot of the graph of results from January to December 2023, available at https://wpt.fyi/interop-2023
Interop 2023 的成功，可在“实验性”仪表板上看到。“Interop”行（深绿色）显示了在 Chrome Dev、Firefox Nightly 和 Safari 技术预览版这三者中通过测试的百分比。

Interop 2023 取得了哪些成就？

  • 它确保了所有浏览器都完全支持 P3 色彩，这距离其首次发布已经过去了七年。
  • 表单控件现在支持垂直书写模式，这在 Web 历史上尚属首次。
  • CSS `border-image` 现在按最初设想的方式工作。
  • Subgrid、容器查询（Container Queries）、:has()、运动路径（Motion Path）、CSS 数学函数（CSS Math Functions）、inert 和 @property 现在在每个现代浏览器中都得到支持。
  • 改进的 Web API 包括 Offscreen Canvas、Web Workers 中的模块、Import Maps、Import Assertions 和 JavaScript 模块。
  • 整个 Media Queries 4 规范现在已在所有地方得到支持，并具有更易于使用的语法。
  • Web Components 获得了提升，得益于 `adoptedStyleSheets`、`ElementInternals`、与表单关联的自定义元素（Form-Associated Custom Elements）以及 Shadow DOM 和自定义元素的基本行为。
  • 有用的 CSS 伪类现在可以信赖，对 :nth-child()、:nth-last-child()、:modal、:user-valid 和 :user-invalid 提供了跨浏览器的一致支持。
  • 功能查询现在支持检测字体特性。
  • 字体调色板（Font Palettes）为彩色字体提供了强大的支持。
  • 在改进 CSS 遮罩（Masking）、HTML 表单、指针和鼠标事件、滚动、转换（Transforms）、URL、WebCodecs 以及解决大量导致 Web 兼容性问题的错误方面取得了显著进展。
  • 还有更多.

我们希望这项工作能让你对使用这些技术重拾信心。如果你过去觉得其中任何一项难以使用，请再试一次。

Interop 2023 有二十六个重点领域，其中二十个已成功完成。工作将继续在自定义属性（Custom Properties）、指针和鼠标事件（Pointer and Mouse Events）、URL 以及一个新的分组“布局”（Layout）——由 Flexbox、Grid 和 Subgrid 组成——上进行。

Interop 2024

现在，我们将在 2024 年再次开展这项工作。共有九十六项重点领域提案提交审议。最终，选定了十六项。将一些新提案组合起来，并延续 2023 年的一些工作，使 Interop 2024 总共有十七个重点领域。

The Interop 2024 dashboard
Interop 2024 仪表板，关注“稳定”浏览器（目前普通用户使用的浏览器）。巧合的是，总体 Interop 分数再次从 48% 开始。

今年新增，Microsoft Edge 现在在 Interop 仪表板上有了自己的列。这目前代表在 Windows 10 上运行的 Edge 和 Edge Dev。

2024 年重点领域

可访问性

Interop 2023 包含一个可访问性调查项目。在 Apple 可访问性团队的领导下，该团队努力为 WPT 创建新的可访问性测试基础设施，并编写了超过 1300 个新的可访问性测试。这些测试现已作为重点领域纳入 Interop 2024，鼓励浏览器增加其支持。

大多数新的可访问性测试涵盖 WAI-ARIA，特别是角色模型（Roles Model）和可访问名称和描述计算（Accessible Name and Description Computation，AccName）。它们共同提供了一种一致的机制来传达元素的用途或意图，以便辅助技术用户了解它是什么以及他们可以用它做什么。

其他新的可访问性测试涵盖了这些技术如何融入主机语言。例如，HTML 可访问性 API 映射规范（HTML-AAM）定义了 HTML 元素的默认可访问性语义，以及浏览器如何与 `

另一组新测试涵盖了 `display: contents` 的可访问性。CSS 中的这种显示模式提供了一种有用的机制来移除内容周围的框——当需要为了 Flexbox 或 Grid 的目的调整内容的父/子/孙关系时非常有用。但由于早期实现中缺乏可访问性，多年来一直无法使用。移除项目上的框会完全将该框的所有内容从可访问性树中移除。有视觉的用户仍然可以看到子内容，但许多辅助技术用户却发现它完全消失了。这些问题中的大多数已在浏览器中修复，但并非所有情况都已修复。这些新测试是迈向完全可访问性和互操作性的下一步。

通过将这些新的可访问性测试纳入 Interop 2024，希望能修复所有浏览器中的每一个问题。我们希望开发者能够更轻松地创建无障碍网站，并让 Web 对每个人（包括残障人士）都变得更好。

CSS 嵌套

CSS 嵌套是 Interop 2024 的一个重点领域，旨在确保解决任何差异，并为您提供使用它的信心。CSS 嵌套功能于 2023 年在所有四个主流浏览器中发布——首先是 Chrome、Edge 和 Safari 在 4 月/5 月，然后是 Firefox 在 8 月。

Web 标准在 5 月到 8 月期间略有变化，放宽了原始要求，即每个嵌套选择器必须以符号开头。开发者现在可以简单地编写 `article`，而不再需要使用 `& article`。

此后所有实现都已更新，但仍有一些细微之处可以通过关注互操作性而受益，特别是随着嵌套工作方式的最终复杂细节在 CSS 工作组中确定下来。例如，Safari 的大多数测试失败都与嵌套 CSS 如何通过 `:host` 与 Shadow DOM 交互有关。

自定义属性

@property 规则在过去几年开始在浏览器中发布。作为 Interop 2023 的一部分，自定义属性（Custom Properties）重点领域的测试通过率从所有稳定浏览器的 4% 上升到 7.6%——在所有预览版浏览器中通过率为 90.7%。Firefox 是最后一个添加支持的浏览器，目前正在 Firefox Nightly 中进行中。由于这项工作尚未完成，该重点领域将在 2024 年继续进行。

借助 `@property`，开发者可以以类似于浏览器引擎定义 CSS 属性的方式声明 CSS 自定义属性——指定其语法、继承行为和初始值。

@property --size {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

这使得您可以在 CSS 中做以前不可能做的事情，例如动画渐变或转换的某些部分。

声明式 Shadow DOM

声明式 Shadow DOM 是一种声明式 API，它允许您仅使用 HTML 来创建可重用的小部件和组件——无需 JavaScript。自 2023 年 3 月起，Safari 16.4 已支持此功能，Chrome 90 则自 2021 年 4 月起支持。Firefox 在 Firefox Nightly 中有一个实现。

声明式 Shadow DOM 是《2023 年 HTML 现状》调查中经常被要求的功能之一，因此它被选为 Interop 2024 的一部分，以确保它在所有浏览器中都具有互操作性。

字体大小调整

font-size-adjust 属性是关注旧技术有用性的一个很好的例子。Firefox 在 2008 年首次实现了字体大小调整，但 Web 设计师和开发者很少使用甚至讨论它。早期规范随着时间演进，通过双值语法增加了对更多语言的支持，并随着 `from-font` 值的引入变得更易于使用。

WebKit 团队在 Safari 16.4 中实现了基本版本，并在 9 月的 Safari 17.0 中添加了更新。Mozilla 在 Firefox 118 中更新了他们的实现，也是在 2023 年 9 月。现在 Safari 和 Firefox 都通过了 100% 的所有测试。Chrome 在 2015 年开始了一个实验性实现，但尚未发布。现在有了 Interop 2024，很可能每个浏览器都将获得完整的支持。

字体大小调整提供了一种简单的方法，使一段文本中使用的所有字体在视觉上具有相同的大小——例如，`1.4rem` 大小的文本中的每个字符都具有相同的 x 高度——或者大写字母高度、`ch` 宽度、`ic` 宽度或 `ic` 高度。双值语法允许您选择要统一的度量标准。

当您将代码与普通文本混合，或将多种语言混合在一起，并且同一句子中不同字体具有不同大小时，此属性特别有用。使用字体大小调整，您可以避免出现奇怪的大字母。不再需要费力调整字体指标来寻找一个能让它们看起来大小相同的“神奇数字”。

a code demo showing the visual consistency of the inked x-height of multiple font families
CSS `font-size-adjust: from font` 使 Courier 字体调整其大小，使其 x 高度与 Iowan Old Style 的 x 高度匹配，而不是将代码排版得在视觉上更大。即使使用回退字体，大小统一性也保持不变。

观看 WWDC23 的《CSS 新功能》了解更多关于 `font-size-adjust` 的信息。

WebSocket 的 HTTPS URL

WebSocket API 的一个怪异之处在于，您需要使用非 HTTP(S) 方案：`ws:`（不安全）和 `wss:`。由于这些 URL 的功能与 HTTP(S) URL 完全相同，这使得该 API 处理起来有点令人沮丧。根据 Web 开发者反馈，WebKit 团队去年决定解决这个问题，使该 API 也支持 HTTP(S) URL。我们已在 Safari 17.0 中发布了支持。

这意味着，你不再需要写

function webSocketHandle(path) {
  const url = new URL(path, location);
  url.protocol = location.protocol === "https:" ? "wss:" : "ws:";
  return new WebSocket(url);
}
// ...
const ws = webSocketHandle(path);

你现在可以写更符合人体工程学（更简洁）的

const ws = new WebSocket(path);

通过将此引入 Interop 2024，我们希望其他浏览器也能采用它，使其普遍可供 Web 开发者使用。

IndexedDB

IndexedDB 是一种 API，它提供了强大的方式在客户端存储数据，以面向对象数据库的形式。它于 2011 年开始在浏览器中发布，多年来 Web 标准不断发展。版本 2 和版本 3 都受所有主流浏览器支持。版本 2 完全互操作，但版本 3 需要一些关注以提高实现质量。作为 Interop 2024 的一部分将有助于确保实现完成并保持一致。

布局

CSS Grid 和 Flexbox 都包含在 2021 年的原始 Interop 项目中。Subgrid 在 Interop 2023 中添加。虽然这三种布局方法现在都处于良好状态，但它们仍不完全完美。这三个领域的测试现在被合并为一个名为“布局”（Layout）的重点领域。工作将继续进行，以确保复杂的边缘情况更具互操作性。同时，开发者应完全放心地使用这三种技术，因为所有浏览器都对 Flexbox、Grid 以及现在的 Subgrid 有着坚实的支持。

指针和鼠标事件

指针事件是针对指向设备触发的 DOM 事件。它们创建了一个单一的 DOM 事件模型来处理鼠标、笔/触控笔或多指触摸等指向输入设备。该 API 最早于 2012 年开始在浏览器中发布，并于 2019 年在所有地方落地，但互操作性仍然不稳固。

2022 年，Interop 团队启动了一个调查项目，更深入地研究指针和鼠标事件的现状，旨在明确共识并编写反映该共识状态的测试。对于 Interop 2023，这些测试使得指针和鼠标事件成为一个重点领域，其测试通过率是 Interop 2023 仪表板和分数的一部分。在这一年里，指针和鼠标事件的测试通过率从 34% 上升到 81%——这是所有领域中最重要的进展。

尽管通过 81% 的测试是一个显著的进步，但仍有更多工作要做，因此指针和鼠标事件将继续作为 2024 年的重点领域。

弹出框

HTML 中的新 `popover` 属性提供了一种浏览器内置的方式，让元素在页面的顶层弹出视图。如果您正在创建覆盖整个网页的叠加层，`dialog` 元素是最佳选择。但是，当您想将任何其他元素转换为弹出消息、用户界面或其他出现和消失的内容时，`popover` 元素提供了一个实现框架。

对 `popover` 的支持已于 2023 年在 Chrome 114 和 Safari 17.0 中发布。Firefox 目前正在 Firefox Nightly 中进行支持。成为 Interop 2024 的一部分将确保这项备受期待的功能有一个良好的开端。

相对颜色语法

相对颜色语法是一种在 CSS 中定义颜色的新方法，它允许您在引用另一种颜色的同时进行定义。例如，您可以将现有颜色按一定量变亮或变暗。您可以获取一个颜色变量，调整饱和度，然后将新颜色分配给第二个变量。相对颜色语法在创建设计系统时会特别强大。

a still from the WWDC session teach how relative color syntax works
观看 WWDC23 的《CSS 新功能》了解更多关于相对颜色语法的信息。

Safari 16.4 是第一个在 2023 年 3 月发布支持的浏览器。Chrome 119 和 Edge 119 在 2023 年 10 月和 11 月发布了支持。目前，所有实现都不支持将 `currentcolor` 与相对颜色语法一起使用。

Interop 2024 的相对颜色语法重点领域不测试相对颜色语法的整体支持。它严格关注 `currentcolor` 是否受支持，并包括色域外行为的测试——检查在不支持 P3 色彩的显示器上会发生什么。将其纳入 Interop 2024 将有助于完成这些最后的细节。

requestVideoFrameCallback

video 元素为在 Web 上放置视频提供了强大的功能。但通常，开发者希望并需要做更多事情。`HTMLVideoElement` 接口提供了特殊的属性和方法，用于在 JavaScript 中操作视频对象。其中一个方法是 `requestVideoFrameCallback()`。它允许您以高效的方式对视频执行逐帧操作——例如视频处理或分析、绘制到画布以及与音频源同步。

自 Chrome 83 和 Safari 15.4 起支持，将其纳入 Interop 2024 将有助于浏览器完成和完善我们的实现。

滚动条样式

滚动条样式重点领域包括两个可用于样式化滚动条的 CSS 属性。`scrollbar-width` 属性提供三个值：`auto`、`thin` 和 `none`。`auto` 值是默认宽度；`thin` 提供更细的滚动条；`none` 隐藏滚动条但仍允许内容滚动。Firefox 64 于 2018 年 12 月实现了支持，它刚刚在 Chrome 121 和 Edge 121 中发布。

`scrollbar-gutter` 属性允许您为滚动条预留空间，因此无论是否存在滚动条，布局都保持一致。`scrollbar-gutter: stable` 规则允许您告诉浏览器为滚动条预留空间，即使没有滚动条。这可以防止在需要或不需要滚动条的状态之间发生布局偏移。它于 2021-22 年在 Chrome 94、Edge 94 和 Firefox 97 中发布。

Safari 在完成此重点领域方面还有最多工作要做。Chrome 和 Firefox 已通过 100% 的测试。具有讽刺意味的是，早在 2009 年，是Safari 最先提供了使用九个伪元素 `::-webkit-scrollbar-*` 样式化滚动条的功能。然而，那种样式化滚动条的方法从未成为官方的 CSS Web 标准。CSS 工作组反而选择了一种简单得多的方法。

@starting-style 和 transition-behavior

此重点领域关注两个用于控制动画的新功能。两者均于 2023 年 9 月在 Chrome 117 和 Edge 177 中发布。

CSS 中的 `@starting-style` 规则允许您为特定元素定义起始值。当元素即将经历过渡时需要此功能。它还提供了一种在 `display:none` 状态之间进行过渡的方式。

.alert {
  transition: background-color 2s;
  background-color: green;
  @starting-style {
    background-color: transparent;
  }
}

在上面的示例中，当元素被添加到文档中时，`background-color` 将从透明过渡到绿色。

以前，只有动画可以动画化离散可动画化属性。CSS 中的 `transition-behavior` 属性将此功能扩展到 CSS 过渡，为在显示或隐藏元素时过渡 `display` 属性铺平了道路。

文本方向性

文本流向是 Web 排版的一个重要方面。有些语言从左到右流动，而另一些则从右到左。支持文本方向的众多技术之一是 `dir` 属性。它允许您用方向（`left`、`right` 或 `auto`）明确标记任何 HTML 元素——其中 `auto` 要求浏览器从第一个字母猜测方向。方向性和 Shadow Tree 的交互作用直到最近才得到明确定义。现在它已在标准层面得到解决，将其添加到 Interop 2024 有助于我们确保实现也保持一致。

text-wrap: balance

Web 设计师长期以来一直希望有一种方法来防止非常短或单字的文本行——通常被称为“孤行”或“寡行”。自响应式 Web 设计出现以来，以及对列宽缺乏控制，这种愿望变得更具挑战性。`text-wrap` 属性为您提供了多种选项，用于告诉浏览器如何使用不同的方法为特定用例计算换行符来换行文本。

`text-wrap: balance` 规则是标题的绝佳解决方案。它平衡了几行文本，使每行文本量大致相同。它已在 Chrome 114 和 Firefox 121 中发布，并在 Safari 技术预览版中实现。

Interop 2024 还包括对 `text-wrap-mode`、`text-wrap-style` 和 `white-space-collapse` 行为的测试。CSS 工作组最近更改了这些长属性（longhands）之间的交互方式，因此目前浏览器之间的支持不均衡。Interop 2024 将有助于确保所有浏览器引擎更新到最新的 Web 标准。

URL

URL 是 Web 最基本的部分之一。没有它们，Web 将不复存在。但与 Web 历史上很早发明的许多事物一样，对其支持尚未完全互操作。为了改进这一点，WHATWG 编写了 URL 实时标准（URL Living Standard），其中详细说明了 URL 应如何精确工作。支持此 Web 标准的测试是 Interop 2023 的一个重点领域，将通过率从 77% 提高到 85%。为确保互操作性，这一领域的工作将在 2024 年继续进行。

Safari 自豪地走在前列，通过了 99.7% 的测试。其他浏览器的改进将有助于确保网站在任何地方都能正常运行。

2024 年调查项目

Interop 2024 还包括三个调查领域。这些是 Interop 团队要进行的“家庭作业项目”。今年所有三个项目都与编写和运行更多测试有关——可访问性测试、移动测试和 WebAssembly 测试。移动测试调查项目旨在完善 WPT 所需的基础设施，以便能够在移动操作系统上测试浏览器，并可能在未来将这些分数包含在 Interop 项目仪表板上。

尽管三项调查中有两项是去年延续的项目，但它们在 2024 年都从零开始。每个参与团队都将为今年设定新目标，仪表板将报告这些目标的进展。

跟踪进度

全年关注 Interop 2024 仪表板，了解 Interop 2024 的进展。

我们的承诺

我们仍然相信互操作性是使 Web 如此成功的基本支柱之一。我们在 Interop 2022 和 2023 中的努力表明了我们对 Web 的深切关注。我们很高兴再次与同事们合作，抓住这个机会，让 Web 为每个人更好地工作。