Interop 2023
推动互操作性向前发展

2023 年 2 月 1 日

作者：Jon Davis, Tim Nguyen 和 Jen Simmons

一年前，Apple、Bocoup、Google、Igalia、Microsoft 和 Mozilla 齐心协力，旨在提高网络的互操作性，并继续履行我们对 Web 标准的承诺——这些行动确保了 Web 在任何浏览器、任何操作系统、任何计算机上都能正常运行。

去年一整年，Interop 2022 专注于 15 个对 Web 开发者最重要的关键领域，选择自动化测试来评估每个浏览器引擎与这些领域的 Web 标准的匹配程度。在 2022 年 1 月至 12 月期间，浏览器取得了显著进展，在所有三个浏览器中通过的测试数量从 49% 提高到 83%。

screenshot of the 2022 graph, also available at http://wpt.fyi/interop-2022
Interop 2022 取得了巨大成功。“Interop”线（深绿色）显示了所有三个浏览器中通过测试的百分比。

WebKit 团队将精力投入到所有重点领域，并自豪地在 2022 年底达到了 98.2% 的通过率。

The final scores for Interop 2022, ending in December. Chrome 88. Firefox 92. Safari 98.
Interop 2022 的最终浏览器得分。

宣布今年的 Interop 2023

现在我们很高兴地宣布今年的 Interop 2023 项目！我们再次与 Bocoup、Google、Igalia、Microsoft 和 Mozilla 携手，共同推动 Web 互操作性向前发展。

分数已经重置。我们去年停用了 Interop 2022 用于评分的一半测试，并添加了许多新测试——所有这些都专注于 Web 开发者最希望接下来改进的技术。

Screenshot of the new Interop 2023 dashboard
新的 Interop 2023 仪表板提供了比以往更多的洞察。点击每项技术的名称，可以查看用于评估其与 Web 标准一致性的测试。

每个“重点领域”都收集了一组针对特定技术的自动化测试，用于评估浏览器实现。“调查”是 Interop 2023 背后的人员运行的团队项目，旨在以小组形式调查一个特别复杂的问题，并找到取得进展的方法。

去年秋天，Interop 2023 的协作团队收到了 87 份关于纳入内容的提案。其中，35 份被接受并合并为 18 个新的重点领域，外加 2 项新的调查。它们与 2022 年的 5 个重点领域和 2021 年的 3 个重点领域一起，使 2023 年的“活跃重点领域”总数达到 26 个。

Active focus areas table
新的 “Interop”列反映了在所有三个浏览器引擎中通过的测试百分比，这是为了提高互操作性的目标。

我们在 2022 年的 7 个重点领域中实现了非常好的互操作性，因此我们将这些领域移至“以前的重点领域”——这是 Interop 仪表板上的一个新部分，它们不再计入总体顶级分数。

Previous Focus Areas table
一个新的 “以前的重点领域” 部分列出了过去几年的重点领域，我们可以在那里继续关注它们。

2023 年重点领域

让我们来看看 2023 年 26 个重点领域中包含的所有 Web 技术。它们现在包括 JavaScript 和 Web API 中的功能，以及 CSS。

边框图像 (Border Image)

Gray square with a gradient border from purple at the top to yellow at the bottom

使用图像为盒子边框提供视觉样式的能力已在浏览器中支持多年。它为边框的外观开启了无限可能。但浏览器之间的行为差异阻碍了 Web 开发者使用 border-image。情况随着时间推移已大大改善，但仍存在不一致之处。通过将边框图像纳入 Interop 2023，希望对细节的重新关注能带来全面的改变。

颜色空间和函数 (Color Spaces and Functions)

色彩表达对设计师至关重要。拥有完整的工具来覆盖各种颜色空间有助于创意设计师让网页变得更美观。颜色空间和函数是 Interop 2022 延续下来的一个重点领域。为确保工作完成，今年的这个领域仍包含针对三个扩展颜色空间（lab、lch、P3）的测试，以及通过函数式符号 color-mix() 在 CSS 中书写颜色。

对于 2023 年，此区域现在包括渐变样式，以便插值（确定中间颜色值的方法）可以在不同颜色空间中进行。此图显示了默认 sRGB 插值与 lab 和 lch 颜色空间中插值之间的差异。

Three stripes of red to purple gradients showing interpolation differences for sRGB, LAB, and LCH color spaces

通过阅读《改善 Web 上的颜色》、《使用 Display-P3 在 CSS 中实现广色域颜色》和《使用 HTML Canvas 实现广色域 2D 图形》了解更多关于颜色空间和函数的信息。

容器查询 (Container Queries)

容器查询在 2022 年开始出现，允许开发者根据其所在容器的特性来对特定项目应用样式。尺寸查询让开发者能够创建根据容器大小自适应的组件，而容器查询单位则以 cq* 单位提供容器的测量值。

Screenshot of Container Queries CSS example code with a browser window showing a demo store of apparel product card components with a large hero layout, three-column tile layout, and sidebar layout

一个独立的卡片组件可以在布局的不同位置以不同大小出现——作为大型英雄图，中等大小以行显示，以及侧边栏的小版本。

通过将尺寸查询和容器查询单位纳入 Interop 2023，我们可以确保 Web 在浏览器之间实现互操作性。

包含 (Containment)

CSS 中的包含 (Containment) 通过将布局、样式、绘制、尺寸（或任何组合）的计算限制在 DOM 的独立片段而不是整个页面，从而提高了性能。此重点领域包括 contain、contain-intrinsic-size 和 content-visibility CSS 属性。它们用于帮助浏览器做出优化决策。例如，content-visibility: auto 是一种便捷的方式，可以将元素渲染推迟到内容通过滚动、页面查找、Tab 键顺序导航等方式与用户相关时。

CSS 伪类 (CSS Pseudo-classes)

此重点领域涵盖了一系列 CSS 伪类：:dir()、:nth-child()、:nth-last-child()、:nth-of-type()、:nth-last-of-type()、:modal、:user-valid 和 :user-invalid。

:nth-child(n of <selector>) 和 :nth-last-child(n of <selector>) 伪类尤其有趣。例如，:nth-child(2 of .foo) 匹配所有子元素中具有 .foo 类的第二个元素。这是一个你可以在 Safari 中尝试的示例，Safari 自 2015 年以来就支持此功能。


如果你想从底部开始计数，请使用 :nth-last-child(n of <selector>)。

现在是添加新 CSS 伪类和改进现有 CSS 伪类的特别激动人心的时刻，因为它们可以在 :has() 内部使用——这使得它们的实用性呈指数级增长。

自定义属性 (Custom Properties)

@property at-rule 通过允许开发者指定变量的语法、继承行为和变量初始值，极大地扩展了 CSS 变量的功能。它使开发者能够在 CSS 中完成以前不可能的事情，例如动画渐变或变换的特定部分。

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

通过 @property 支持，开发者可以以类似于浏览器引擎定义 CSS 属性的方式声明自定义属性。

Flexbox

这种用于按行或列排列项目的一维灵活布局解决方案已经存在了超过十五年。在此期间，Flexbox 规范随着细微的行为变化和对精确细节的更新澄清而日趋成熟。今年的 Flexbox 重点领域在往年的基础上进行了扩展，添加了最新的 WPT 测试。保持领先于实现中新的不一致性，可以维护开发者对这种广泛使用的布局技术的信心。

字体功能检测与调色板 (Font Feature Detection and Palettes)


字体功能检测通过添加两个函数来测试浏览器支持哪些字体格式和技术，从而扩展了 功能查询。开发者可以编写诸如 @supports font-format(woff) { ... } 或 @supports font-tech(color-COLRv0) { ... } 的语句，以便仅在支持 WOFF 字体或 COLRv0 时有条件地应用 CSS。

彩色字体提供了一种在不牺牲常规文本优势的情况下为设计增添丰富性的方法。无论彩色字体多么具有装饰性，其底层文本始终是可搜索、可复制/粘贴、可缩放、可翻译且与屏幕阅读器兼容的。

字体调色板为 Web 开发者提供了一种机制，用于更改彩色字体使用的颜色调色板。font-palette 属性允许 Web 开发者选择彩色字体中包含的几个预定义颜色调色板中的一个——例如，声明字体的深色调色板用于网站的深色模式设计。@font-palette-values 规则为 Web 开发者提供了一种定义自己的自定义颜色调色板以重新着色彩色字体的方法。通过阅读《在 Web 上自定义彩色字体》了解更多信息。

表单 (Forms)

在日语和中文等语言中，垂直书写文本是很常见的。浏览器中支持垂直文本已有数年，但表单字段中对垂直文本的支持一直缺失。Interop 2023 是业界承诺改变这一状况的承诺，通过在 input、textarea 和 select 菜单中支持垂直书写模式。

2023 年表单重点领域也沿用了 Interop 2022 的测试。这包括对 appearance 属性、form、禁用表单控件上的事件、输入元素、表单提交和表单验证的测试。

网格 (Grid)

CSS 网格是另一种比 Flexbox 更强大的布局工具。将页面划分为区域并定义内容与网格区域的关系的能力，在结构化布局中提供了无与伦比的控制。与 Flexbox 类似，网格重点领域在 Interop 2021 的工作基础上进行了扩展，以确保这种强大技术的可靠布局和采用。

:has()

:has() 伪类在 Interop 2022 中并未被考虑纳入，因为它当时还不清楚是否可能在浏览器中以高性能方式实现“父选择器”。然后，在 2022 年 3 月，Safari 15.4 证明了这是可以实现的。

这个简单的工具让开发者期待已久地能够根据其后代或兄弟元素的状态来应用样式到祖先元素。这是一种强大的方式，可以减少对 JavaScript 的需求，并且一旦在所有浏览器中互操作地实现，它将变得最有用。这使得将其纳入 Interop 2023 变得重要。通过阅读将 :has() 用作 CSS 父选择器及更多，了解 :has() 有多强大。

惰性 (Inert)

惰性子树最初由模态 dialog 元素使用，以防止用户与打开的对话框后面出现的内容进行交互。惰性重点领域涵盖了新的 inert 属性，它将此功能扩展到所有 HTML 元素。当一个元素被标记为 inert 时，它不再可编辑、可聚焦或可点击；并且它对辅助技术是隐藏的。阅读《使用惰性属性的非交互元素》以了解更多信息。

遮罩 (Masking)

CSS Masking 提供了多种机制来遮罩图像的一部分或裁剪盒子的一部分。它们在浏览器中很长一段时间以来都得到了支持，但像许多很久以前实现的事物一样，浏览器之间存在令人头疼的差异。这正是 Interop 2023 所要解决的开发者痛点。遮罩重点领域包括改进 CSS 裁剪和遮罩行为，包括它们在动画和 SVG 内容中的使用。

数学函数 (Math Functions)

CSS 数学函数帮助开发者创建复杂的计算来样式化复杂的布局或控制动画，而无需 JavaScript。Interop 2023 包括：

  • 指数函数：pow(), sqrt(), hypot(), log(), exp()
  • 符号相关函数：abs(), sign()
  • 步进值函数：round(), mod(), rem()
  • 三角函数：sin(), cos(), tan(), asin(), acos(), atan(), atan2()

所有这些 CSS 数学函数的支持首次出现在 Web 上是在 Safari 15.4 中。

媒体查询 4 (Media Queries 4)

正如大多数前端 Web 开发者所知，CSS 媒体查询提供了一种根据视口大小或设备其他特性应用 CSS 的机制。规范的最新级别，媒体查询级别 4，添加了用于组合和修改查询的新语法，以及简化的范围语法，使开发者更容易编写复杂的查询。这种新语法与容器查询中可用的选项相匹配。

and、not 和 or 条件使复杂查询更具可读性。新的范围语法提供了一种更直接的模式来声明视口范围。例如，当视口宽度等于 500px 或介于 500px 和 900px 之间（但不等于 900px）时，@media (500px <= width < 900px) { ... } 生效。

模块 (Modules)

模块重点领域包括 Web Workers、Import Maps 和 Import Assertions 对模块的支持。

JavaScript 模块允许 Web 开发者导入和导出变量、函数等。导入映射 (Import Maps) 赋予 Web 开发者控制 JavaScript 导入行为的能力。而导入断言 (Import Assertions) 为模块导入语句添加了语法，以指示预期的模块类型，从而有助于保护网站免受无意中运行恶意 JavaScript 的影响。

运动路径 (Motion Path)

CSS 运动路径（也称为偏移路径）用于描述元素要遵循的路径。它与 CSS 变换结合使用时非常强大，尤其有助于 CSS 动画——使得在 CSS 中编写复杂动作成为可能，并避免 JavaScript 性能开销。此重点领域涵盖 offset、offset-anchor、offset-distance、offset-path、offset-position 和 offset-rotate。

离屏 Canvas (Offscreen Canvas)

使用 Canvas 时，渲染、动画和用户交互通常发生在 Web 应用程序的主执行线程上。离屏 Canvas 提供了一个可以在屏幕外渲染的 Canvas，将 DOM 和 Canvas API 解耦，使得 <canvas> 元素不再完全依赖于 DOM。渲染也可以在 Worker 上下文中运行，允许开发者在单独的线程中运行任务，避免主线程上的繁重工作。

DOM 独立操作和在主线程之外渲染的结合，可以为用户提供显著更好的体验，尤其是在低功耗设备上。

此重点领域还包括 Web Workers 中的 requestAnimationFrame()，它可以与 OffscreenCanvas 一起使用，以在主线程之外执行其他渲染和动画相关任务。

指针和鼠标事件 (Pointer & Mouse Events)

指针事件是针对指向设备触发的 DOM 事件。它们旨在创建一个单一的 DOM 事件模型，以处理指向输入设备，如鼠标、笔/手写笔或触摸（一根或多根手指）。

去年，Interop 2022 团队对指针和鼠标事件的状态进行了调查。较旧的不完整 Web 标准导致了浏览器、操作系统和设备之间的许多差异。2022 年的调查项目旨在评估可以采取哪些措施来提高互操作性，并选择了一组特定的测试来反映浏览器可以改进的地方。

2023 年重点领域现在包括 16 项测试，涵盖了指针和鼠标与页面的交互，包括它们在命中测试和滚动区域中的行为。触摸和手写笔未包含在内，因为在测试适当的设备之前需要额外的 WPT 测试基础设施。

滚动 (Scrolling)

滚动 (Scrolling) 重点领域是 Interop 2022 的延续。要增加互操作性，还有更多工作要做，因此大家同意再次将其纳入。这项工作包括滚动吸附 (Scroll Snap)、scroll-behavior 和 overscroll-behavior。

滚动吸附 (Scroll Snap) 为设计师和开发者提供了控制界面滚动方式和内容显示方式的工具。scroll-behavior 属性设置滚动框在导航或 CSSOM 滚动 API 触发滚动时的行为。而 overscroll-behavior 属性决定了浏览器在达到滚动区域边界时的行为。

子网格 (Subgrid)

子网格是 Interop 2022 的另一个重点领域，团队同意将其延续。在所有浏览器中实现 子网格 的互操作性，将把 Web 布局提升到新的水平，完全实现 CSS 网格 的愿景。

a screenshot of the Grid Inspector in Web Inspector showing the subgrid

子网格提供了一种简便的方法，可以将网格容器的孙子元素放置在该网格上。它使得在复杂的布局中对齐项目成为可能，而无需考虑 DOM 结构。

变换 (Transforms)

a 3D cylinder of numbered squares

CSS 变换是 Interop 2021 的一个延续重点领域。通常用于动画，CSS 变换提供了一种在二维或三维空间中变换盒子（box）的机制。历史上，3D 变换一直与渲染引擎处理层的方式相关联。在过去两年中，Firefox、Chrome 和 Safari 的工程师密切合作，尤其改进了 3D 的互操作性。通过继续关注这一领域，Interop 2023 旨在将其当前在所有三个浏览器引擎中通过的测试数量从目前的 92.8% 提高。

URL

URL 是 Web 的基本组成部分。没有它们，Web 就不会存在。但就像 Web 历史早期发明的许多事物一样，它们并非完全互操作。为了改进这一点，WHATWG 编写了一份规范，其中包含了关于 URL 应如何精确工作的详细信息。为了进一步促进互操作性，URL 现在是 Interop 2023 的一个重点领域。

WebCodecs (视频)

WebCodecs API 通过提供对视频流的单个帧和音频块的低级访问，使 Web 开发者能够完全控制媒体的处理方式。这对于进行视频或音频编辑、视频会议或其他视频或音频实时处理的应用程序尤其有用。对于 Interop 2023，此重点领域包括 WebCodecs 的视频处理部分。

Web 兼容性 2023 (Web Compat 2023)

与 Interop 2022 类似，今年的项目包含一个名为“Web 兼容性”的重点领域。它是一个各种 Bug 的集合，这些 Bug 已知会导致网站兼容性问题，以及那些如果缺失，最有可能导致网站在一个浏览器中工作但在另一个浏览器中不工作的功能。

去年的努力取得了令人难以置信的成功。2022 年的测试现在在所有三个浏览器引擎中达到了 96.9% 的互操作性，其中两个浏览器获得了 100% 的分数。由于这一成功，Web 兼容性 2022 的测试现已作为“以前的重点领域”退役。

对于 2023 年，我们选择了一整套全新的测试。它们包括对正则表达式后行断言 (Regex Lookbehind)、行内编辑、禁用控件上的事件分派、CSS image-set、white-space 和 text-emphasis 的测试。

Web Components

Web Components 是一套用于创建可重用、封装功能的自定义元素的技术。这个 Interop 2023 重点领域包括可构建样式表 (Constructable stylesheets)、adoptedStyleSheets、ElementInternals、表单关联的自定义元素 (Form-associated Custom Elements)，以及 Shadow DOM 和 Custom Elements 的基本行为。

2023 年调查项目

2023 年计划了两项调查工作。这两项都是旨在改进 WPT 测试基础设施的项目，以便 Interop 2024 有可能包含更广泛的技术。

一项工作将探讨如何测试移动操作系统上浏览器引擎的互操作性。另一项工作将探讨如何测试特定于可访问性的 Web 技术的互操作性。

我们对互操作性的持续承诺

我们坚信，互操作性是使 Web 成为如此成功平台的基本支柱之一。WebKit 在 Interop 2022 中的努力表明了我们对 Web 的高度重视。我们很高兴能再次与同事们合作，抓住这个机会，帮助网站和 Web 应用程序为每个人提供更好的体验。