携手合作：互操作性 2022

2022 年 3 月 3 日

作者：Jen Simmons

从一开始，Web 就旨在任何浏览器、任何计算机上运行。这通过互操作性实现——即每项底层 Web 技术在所有浏览器中以相同方式实现。要实现互操作性，所有浏览器工程师都必须致力于根据 Web 标准（定义新技术的极其详细的规范）来实现 Web 技术。

2022 年，Apple、Bocoup、Google、Igalia、Microsoft 和 Mozilla 齐心协力，承诺在名为“互操作性 2022”（Interop 2022）的项目中，改进对 Web 开发者体验影响最大的 15 个关键领域的互操作性。

从根本上说，互操作性 2022 是由一组自动化测试生成的一个不断变化的度量指标，旨在评估对 Web 开发者最重要的某些 Web 标准的支持情况。互操作性 2022 仪表板将在全年不断更新，显示浏览器工程师修复缺陷、实现新功能和改进测试的进展。

a screenshot of the Interop 2022 dashboard, showing starting scores of: Chrome and Edge Dev, 71. Firefox Nightly, 74. And Safari Technology Preview: 73.
2022 年 3 月 3 日，互操作性 2022 仪表板上的当前总分。

互操作性 2022 规划小组选择了十个新的重点领域，以补充 2021 年兼容性项目中的五个领域。我们还致力于几个调查项目，这些项目将于今年春季启动。

a screenshot of the Interop 2022 dashboard, showing the data table of the 15 focus areas, with the percentage supported for each browser
2022 年 3 月 3 日，互操作性 2022 仪表板上的分数细分。

重点领域

从提案列表中选择，着眼于网页设计师和开发者最想要和最需要的，2022 年的十个新重点领域是：

  1. 级联层
  2. 色彩空间与函数
  3. 包含
  4. 对话框元素
  5. 表单修复
  6. 滚动
  7. 子网格
  8. 排版与编码
  9. 视口单位
  10. Web 兼容性

让我们快速浏览一下每个领域。

级联层

为了缓解 Web 开发者在大型项目中使用 CSS 时遇到的挫折，级联层（Cascade Layers）提供了一种强大的方式来将样式组织到层中，其中特异性在每个层内部独立计算。

a diagram of cascade layers, showing how Author layers cascade

一个网站可以创建一个“框架”层和一个“自定义”层——将所有来自第三方框架的 CSS 分配给框架层，并将自己的代码写入自定义层。他们可以指定自定义层中的所有内容都应优先于框架层中的所有内容，无论所使用的选择器特异性如何。

色彩空间与函数

在 Web 的早期，大多数网站将其颜色使用限制在 216 种特定颜色调色板中。然后很长一段时间，Web 开发者使用 sRGB 色彩空间中的任何颜色，通常以十六进制、rgb()、rgba() 或 hsl() 表达这些颜色。与此同时，相机和显示器技术已大大发展，能够捕捉和显示更广泛、更鲜艳的色彩范围。今天的 Apple 显示器支持 Display P3 色彩空间，它比 sRGB 宽约 50%。

新的颜色函数和对新色彩空间的支持为 Web 带来了这种活力。互操作性 2022 包括测试对三种扩展色彩空间（LAB、LCH、P3）的支持，以及通过函数表示法在 CSS 中编写颜色的两种方式：color-mix 和 color-contrast。

在《提升 Web 上的色彩》、《CSS 中使用 Display-P3 的广色域颜色》和《使用 HTML Canvas 的广色域 2D 图形》中了解更多关于色彩空间和函数的信息。

包含

几年来，Web 开发者最希望添加到 Web 的功能是容器查询（Container Queries）。它将是 CSS 中一个强大的工具，用于识别和测量特定容器的大小，然后根据该大小有条件地应用样式。它就像媒体查询，但不是测量视口的大小，而是测量容纳内容的盒子的大小。

包含（Containment）是使容器查询工作的基础。事实上，容器查询定义在包含规范的第 3 级。推动互操作性 2022 的小组今年未能就包含容器查询达成共识。但我们确实同意通过 containment 属性关注布局、大小和绘制包含的互操作性，为未来优先处理包含和容器查询其余部分的互操作性奠定基础。

对话框元素

作为 Web 长期以来备受期待的另一个功能，对话框元素提供了一种强大而稳健的方式来创建覆盖层和模态框。::backdrop 伪元素使得样式化模态框下方的背景成为可能。你可以在《介绍对话框元素》中了解更多关于如何使用 <dialog> 和 ::backdrop 的信息。

表单修复

表单是网页设计师和开发者发现互操作性挑战的另一个领域——Open UI 社区小组和相关标准机构正在努力解决这些挑战。互操作性 2022 通过重点提高现有规范的现有测试的通过率来为这项工作做出贡献。这包括 appearance 属性、<form>、禁用表单控件上的事件，以及输入元素、表单提交和表单验证的缺陷。

滚动

今天的网站和 Web 应用比以往任何时候都更关心滚动的工作方式。滚动吸附（Scroll snap）为设计师和开发者提供了控制界面滚动方式和内容显示方式的工具。CSS 中的 scroll-behavior 属性设置了当滚动由导航或 CSSOM 滚动 API 触发时，滚动框的行为。overscroll-behavior CSS 属性决定了浏览器在达到滚动区域边界时的行为。

子网格

CSS Grid 于五年前，即 2017 年 3 月发布，彻底改变了 Web 布局设计的可能性。子网格（Subgrid）定义在 CSS Grid Level 2 中，它提供了一种简单的方式将网格容器的孙代元素放置在该网格上。这将使得跨复杂布局对齐项目成为可能，而无需考虑 DOM 结构。Grid 和 Subgrid 结合使用将更充分地实现 Web 上工作布局系统的愿景。

排版与编码

排版与编码包含了一系列影响 Web 排版的测试。字体特性（Font Features）是用于优化排版的强大属性，但由于支持不完整，它们比预期更难使用。绝大多数编码测试在所有浏览器中都能通过，但有少数未能通过，因此它们被包含在内。此外，ic 单位也包含在内。

视口单位

Web 开发者经常寻求一种与视口单位类似，但在移动设备上表现更好的工具，因为用户滚动页面时浏览器视口的尺寸会发生变化。新的视口单位（Viewport Units）就是这个解决方案。100svh 指的是最小可能视口高度的 100%。100lvh 指的是最大可能视口高度的 100%。100dvh 指的是动态视口高度的 100%——这意味着该值将随着用户滚动而改变。

100svh measures the smallest viewport, top to bottom. 100lvh measures the largest viewport. 100dvh measures the dynamic viewport, changing as the user scrolls.

还有其他新的视口单位——svw、lvw 和 dvw 用于宽度，具有相同的目的。还有新的单位可以指代视口的行内或块尺寸。

Web 兼容性

有许多场景可能会影响 Web 兼容性。例如，浏览器中的特定缺陷可能会不成比例地导致某些网站无法按预期工作，或者某个浏览器可能偏离 Web 标准，导致网站或 Web 应用用户体验不一致且存在缺陷。互操作性 2022 旨在通过 Web 兼容性测量来捕获和解决这些问题。

调查项目

小组还知道有其他几项对 Web 开发很重要，但目前无法通过自动化测试轻松评估的项目。我们承诺在这些领域开展多项调查——手动测试浏览器，确定自动化测试是否以及如何能更有帮助，改进 WPT 自身的基础设施，发现可能仍然缺乏互操作性的地方，并向相关标准小组提出建议。这三个调查领域是：

  • 编辑、contenteditable 和 execCommand
  • 指针和鼠标事件
  • 视口测量

基于整个小组已完成的工作量，每个浏览器在“2022 年调查”中将始终具有相同的结果。

我们对互操作性的承诺

所有这些技术对 Apple 和所有在 WebKit 上工作的人都很重要。我们深切关注 Web 的健康以及 Web 标准的可互操作实现。我们欢迎与众多 Web 标准组织以及在互操作性 2022 项目中的同事合作，使 Web 尽可能地互操作。因为只有这样，网站和 Web 应用才能为最重要的人——那些日常使用 Web 生活的人们——提供最佳体验。

了解更多

阅读来自Bocoup、Google、Igalia、Microsoft 和 Mozilla 的文章，了解更多关于互操作性 2022 的信息。