Interop 2023：MDN 更新

该Interop 项目是一个基准测试和测试套件，用于跟踪不同浏览器之间 Web 功能的互操作性。然而，Interop 不仅仅是测试；它是一个浏览器供应商之间的联合倡议，旨在识别那些能够从浏览器之间的一致性中受益的重要功能，并在日历年中推动这些功能的发展。

在过去的三年里，开发人员共同努力提高了整体 Interop 基准测试分数。与往年一样，Interop 2024仪表板显示了浏览器供应商已同意共同努力的功能，以及不同浏览器之间 Web 功能兼容性分数的进展情况。

该倡议的主要目标是确保开发人员能够为所有人创建无缝的 Web 体验，而无论他们选择哪种浏览器。当开发人员能够构建在一个一致的 Web 平台上的时候，每个使用 Web 的人都能够在他们的日常在线活动中从中受益。

Web 平台的一个关键优势在于，它是由标准定义的，而不是由单个实现的代码定义的。这创建了一个共享平台，它不依赖于特定的硬件、公司或商业模式。 - Interop 2022 公告，Mozilla Hacks

Interop 团队选择重点关注领域基于用户和 Web 开发人员的反馈，以识别由于浏览器支持不佳或不一致而导致的特别成问题的功能或功能组。一套无头浏览器测试断言浏览器在每个重点关注领域都以符合规范的方式运行。

幕后一个加速器是浏览器供应商可以随代码更改一起发布Web 平台测试(WPT)，自动化流程可以获取这些测试，并且可以有效地将测试下游传递到 WPT 项目中。与 Interop 紧密反馈循环一起发布修复和功能，使浏览器开发人员能够直接看到他们的工作对 Web 生态系统的影响，这是推动开放 Web 向前发展的显著动力因素。

许多代码更改已在多个浏览器中发布，旨在提高 Interop 分数。如下面的屏幕截图所示，总体基准测试结果很好地展现了跨浏览器兼容性的提高。要深入了解该项目的进展，可以使用此交互式仪表板。

一些重点关注领域在一年内发生了巨大变化。例如，CSS 自定义属性中的功能在 2023 年 1 月仅为 4%，到年底却飙升至 89.5% 的通过率。

CSS子网格是另一个很好的例子，它在去年从 12.5% 上升到 90.8% 的总体通过率。

基准测试结果描绘了该项目目标的成功景象，鼓励在所有地方都符合 Web 标准。

MDN 团队在 Interop 中的角色包括确保 Interop 中包含的功能（尤其是那些已达到跨浏览器支持的功能）拥有可靠且最新的文档。这使开发人员能够自信地使用最近在主要浏览器版本中变得稳定的功能构建 Web。

Interop 2023是团队去年的一项文档目标。我们的目标是审核与 Interop 2023 中的重点关注领域相对应的 MDN 内容，并在功能及其支持不断发展的同时更新文档，使其保持准确和有用。

许多功能（例如:has()）在 2023 年在所有主要浏览器引擎中都达到了稳定状态，这意味着我们可以删除许多实验性警告，并在适当的情况下更新代码以使用最新的语法。

2023 年是 CSS 重要的一年，我们看到了许多 CSS 颜色支持方面的改进，这带来了一些出色的文档改进。以下是团队专注于 Interop 所带来的更改中的一些有趣亮点：

• docs(CSS)：为 CSS 属性和值 API 添加模块着陆页
• docs(CSS)：为滚动溢出行为添加模块着陆页
• docs(CSS)：为 CSS 变换模块添加模块着陆页
• docs(HTML)：Inert - 关于内容不可感知的说明

如果你想查看 Interop 2023 任务和 PR 中涵盖的所有其他内容，请查看MDN Interop 2023 跟踪问题，该问题在 GitHub 上提供了 56 个 PR 和子任务的链接。除了参考文档和指南之外，我们还在 MDN 博客上写了一些关于 Interop 主题的文章，例如 CSS 颜色、边框图像和容器查询。

• CSS 中的边框图像：Interop 2023 的一个关键重点关注领域
• 学习如何使用 HSL 在 CSS 颜色中使用色相
• CSS 颜色（级别 4）中的新函数、渐变和色相
• CSS 容器查询入门

以下是 Interop 2023 中的重点关注领域，以及每个领域的 MDN 文档链接。我们希望所有这些保持文档更新的工作都能改善你阅读这些文档的体验，并帮助你进行 Web 开发。

CSS

重点关注领域	描述
边框图像	如何将图像用作元素的边框。
颜色空间和函数	指定颜色值和颜色空间的不同方法。
容器查询	基于父容器大小的封装。
包含	将子树与文档的其余部分隔离开。
CSS 数学函数	数学函数，例如 min()、sin()。
CSS 伪类	元素的状态选择器（例如，:hover、:focus）。
自定义属性	用于可重用值的自定义 CSS 变量。
Flexbox	用于在一维流中排列元素的布局。
字体特征检测和调色板	高级排版功能。
网格	基于网格的布局系统。
:has()	根据其后代选择元素。
蒙版	如何使用蒙版层部分或完全隐藏元素。
媒体查询 4	根据设备特性应用样式。
运动路径	沿路径定位元素以进行动画。
滚动	控制 Web 文档中的滚动。
子网格	扩展 CSS 网格以允许网格项与祖先网格相关联。
变换	对元素执行 2D 和 3D 变换。

HTML

重点关注领域	描述
表单	使用表单收集用户输入。
Inert	使元素对辅助技术不可交互且不可见。

API

重点关注领域	描述
Web Workers 中的模块	使用 Web Workers 在后台线程中运行脚本。
离屏画布	通过脚本渲染图形，而无需更新主页面。
指针和鼠标事件	处理来自鼠标和触摸界面的输入。
URL	用于创建和管理 URL 的 API。
Web 编解码器（视频）	用于编码和解码音频和视频的编解码器。

其他

• Web Components：一系列允许创建可重用自定义元素的技术。

我们很高兴看到 2024 年 Web 平台上将发布哪些内容，我们将密切关注 Interop，看看下一个推动者和变革者是什么。我们将 Interop 视为一项最重要的、最令人兴奋的举措，它激励浏览器供应商构建一个符合规范且开放的 Web。

希望你喜欢这篇文章！请随时与我们联系，让我们知道你的想法。如果你想了解更多关于 Interop 的信息，这里有一份公告和项目页面的资源列表：

• 宣布 Interop 2024，在 hacks.mozilla.org 上
• Interop 2024，在 web.dev 上
• Web 凭借 Interop 2024 变得越来越好，在 webkit.org 上
• WPT 主页
• Interop 2024 项目页面，在 wpt.fyi 上