Interop 2022：年终更新

了解 2022 年期间实现互操作性的部分功能。

Rachel Andrew

我们又迎来了一年岁末，现在是时候回顾一下浏览器在共同努力提高 Web 平台互操作性方面所做的改进。您可以查看今年 3 月份的帖子，了解该倡议的启动情况。

Scores showing Chrome and Edge Dev on 71, Firefox Nightly on 74, Safari Technology Preview on 73.
2022 年 3 月份实验性浏览器的得分。

年终总体得分显示所有引擎都有了很大的改进。

Scores showing Chrome and Edge Dev on 90, Firefox Nightly on 89, Safari Technology Preview on 94.
2022 年 12 月份实验性浏览器的得分。

在这篇文章中，了解 2022 年期间取得的进展。除了这些重点功能外，所有引擎还进行了许多较小的改进。导致引擎之间不一致并在开发过程中给您带来麻烦的小问题已得到修复。看到大型功能跨浏览器可用当然令人兴奋，但有时是小事情会引起最多的问题，很高兴看到已经改进了很多。

级联层

级联层让您可以通过将选择器分组到层中来管理级联。只有当它在所有地方都受支持时，这种功能才会变得有用。现在所有主要引擎都支持级联层，所有浏览器的得分都反映了该功能的互操作性，Firefox 仅剩下一些测试要通过。

浏览器支持

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4.

来源

dialog 元素

dialog 元素允许创建模态和非模态对话框。这是 Web 上的常见模式，使用此元素可为您提供可用性和可访问性，否则您在创建自己的组件时必须开发和测试这些功能。在文章构建对话框组件中，Adam Argyle 解释了如何在此元素之上构建不同类型的对话框。

浏览器支持

  • Chrome: 37.
  • Edge: 79.
  • Firefox: 98.
  • Safari: 15.4.

来源

子网格

在 2022 年初，唯一支持 grid-template-rows 和 grid-template-columns 的 subgrid 值的浏览器是 Firefox。在 2022 年期间，Safari 已实现支持，并且该功能正在 Chrome 中开发中。它将错过互操作性的年终截止日期，但它正在路上。

浏览器支持

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

来源

视口单位

视口单位是唯一在所有引擎中都达到 100% 测试通过率的功能。这包括小型和大型视口的概念，这解释了移动设备上随着设备 UI 元素的出现和消失而变化的视口大小。您可以在文章大型、小型和动态视口单位中找到有关这些单位的更多信息。

浏览器支持

  • Chrome: 108.
  • Edge: 108.
  • Firefox: 101.
  • Safari: 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() 支持，允许您在您选择的空间中混合两种颜色。color-mix() 函数也位于 Safari 和 Firefox 的标志后面。更多颜色、更好的颜色、更好的渐变和更好的工具。

Interop 2023

我希望您会很高兴得知我们不打算在 2022 年底停止，并且Interop 2023 已经很好地完成了初始规划阶段。在新的一年里，我们将能够宣布已选择的功能，并期待又一年让 Web 开发变得更容易。

英雄图片由 Ian Schneider 提供。