Interop 2022：年终更新

探索 2022 年已经变得具有互操作性的部分功能。

Rachel Andrew

新的一年已到年底，我们一起努力改善网络平台的互操作性，让我们一起来看看浏览器做出的改进。随着该计划的推出，您可以查看我们今年 3 月份发布的帖子，了解我们是如何开始的。

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

年底的总体得分表明，所有引擎都取得了显著的进步。

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

通过这篇博文，您可以了解在 2022 年取得的进展。除了这些标题功能外，所有引擎还进行了许多小幅改进。一些小问题可能导致引擎之间出现不一致，在开发过程中给您造成困扰，但问题现已得到解决。看到跨浏览器可用的大功能无疑非常令人兴奋，但有时一些小问题也会带来最多的问题，看到这些改进带来了多少好处。

注意 ：查看这些测试，这些测试在年初至少在一种浏览器中未通过，且现已在所有引擎中通过。请注意，此链接可能有点不可靠，如果不起作用，请尝试重新加载。

级联层

借助级联层，您可以通过将选择器分组为层来管理级联。这类功能只有在所有国家/地区均受支持时才会派上用场。现在，所有主流引擎都支持级联层，并且所有浏览器中的分数反映了该功能的互操作性，就 Firefox 而言，还有几个测试需要通过测试。

浏览器支持

• 99
• 99
• 97
• 15.4

来源

dialog 元素

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

浏览器支持

• 37
• 79
• 98
• 15.4

来源

子网格

2022 年初，只有 Firefox 支持 grid-template-rows 和 grid-template-columns 的 subgrid 值。Safari 已于 2022 年推出，并且正在 Chrome 中开发此功能。我即将错过年底实现互操作性的截止日期，但已经近在眼前了。

浏览器支持

• 117
• 117
• 71
• 16

来源

视口单位

视口单元是唯一一项在所有引擎中都完全通过测试的功能。其中包括“小”和“大”视口的概念，这些概念解释了移动设备上视口大小会随着设备界面元素出现和消失的变化。您可以在博文中的大型、小型和动态视口单元中详细了解这些单元。

浏览器支持

• 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 已经进入初始规划阶段。新年，我们将公布入选的功能，期待在新的一年里更轻松地进行网络开发。

主打图片，作者：Ian Schneider。