Interop 2022：年终更新

仅探索 2022 年可以互操作的部分功能。

Rachel Andrew

又是一年年底了，现在是时候看看浏览器带来的改进了，我们一起努力提高网络平台的互操作性。随着该计划的推出，您可以阅读我们在今年 3 月份发布的博文，了解我们的起步历程。

实验浏览器在 2022 年 3 月的得分。

年底的总体得分表明所有引擎都有很大的进步。

实验浏览器在 2022 年 12 月的得分。

在本博文中，您将了解我们在 2022 年取得的进展。除了这些标题功能之外，所有引擎都做出了许多小幅改进。可能导致引擎之间出现不一致、导致您在开发过程中无法正常运行的小问题已得到解决。看到可跨浏览器使用的大型功能固然令人兴奋，但有时是一些小问题导致了最多的问题，因此看到改进后将有多么高兴。

注意： 请探索于今年年初至少在一个浏览器中未通过且目前在所有引擎中通过的测试。请注意，此链接可能有点不可靠，如果不起作用，请尝试重新加载。

级联层

借助级联层，您可以将选择器分组为多个层，从而管理级联。只有在所有平台都受支持时，才会有实用价值。现在，所有主要引擎都支持级联层，并且所有浏览器中的得分反映了功能的互操作性，在 Firefox 中仅剩几项测试要通过。

浏览器支持

• 99
• 99
• 97
• 15.4

来源

dialog 元素

dialog 元素支持创建模态和非模态对话框。这是 Web 中的一种常见模式，使用此元素可为您提供易用性和可访问性，您在创建自己的组件时就必须进行开发和测试。在构建对话框组件一文中，Adam Argyle 介绍了如何在此元素的基础上进行构建，以构建不同类型的对话框。

浏览器支持

• 37
• 79
• 98
• 15.4

来源

子网格

2022 年初，唯一支持 grid-template-rows 和 grid-template-columns 的 subgrid 值的浏览器是 Firefox。2022 年，Safari 已经开始支持此功能，Chrome 中的此功能正在开发中。我们即将错过实现互操作功能的年终截止日期，但已经快到了。

浏览器支持

• 117
• 117
• 71
• 16

来源

视口单位

视口单元是唯一一个在所有引擎上 100% 通过测试的功能。其中包括小视口和大视口的概念，这些概念会说明移动设备上的视口大小会随着设备界面元素的出现和消失而发生变化。要详细了解这些广告单元，请参阅大型、小型和动态视口单元一文。

浏览器支持

• 108
• 108
• 101
• 15.4

颜色 4

通过这种颜色工作集合，CSS 不仅可以指定更高清晰色域（例如 display p3、rec2020）中的颜色，还可以提供新的颜色函数，其中每个函数都有处理颜色的独特实用程序。新的颜色空间包括 lch()、oklch()、lab()、oklab()、display-p3、rec2020、a98-rgb、prophoto-rgb、xyz、xyz-d50、xzy-d65：立即在启用此标志的情况下在 Canary 中试用这些颜色空间。这些更改也适用于渐变，让作者能够指定渐变所用的颜色空间。同一个标志还支持 color-mix()，可让您在自己选择的空间中混合两种颜色。在 Safari 和 Firefox 中， color-mix() 函数也位于一个标记之后。更丰富的色彩、更美妙的色彩、更出色的渐变效果以及更出色的工具。

Interop 2023

很高兴您了解到，我们不打算在 2022 年底停止使用，Interop 2023 已顺利完成初始规划阶段。在新年里，我们将公布入选的功能，期待在新的一年能更轻松地开发 Web 应用。

主打图片：Ian Schneider。