利用 Interop 2023 庆祝网络更具互操作性

Rachel Andrew

Interop 2023 已于去年年底结束。浏览器供应商和其他相关方所做的努力旨在打造一个更具互操作性的网页，减少浏览器间的差异带来的影响。这篇博文将会分享最终结果 以及 Chrome 团队最喜欢的一些功能

最终得分

浏览器实验性得分的屏幕截图。总体互操作性：95。调查：85。Chrome/Edge：99。Firefox：98。Safari：97。
2024 年 1 月 31 日实验性浏览器的最终得分。 请参阅 wpt.fyi/interop-2023

很高兴看到这么多绿色，将其与 2023 年初的得分进行比较，我们已经取得了长足的进步，每个浏览器都取得了显著的提升。

我们期待什么？

如需查看 2023 年重点领域的完整列表，请访问 Interop 2023 信息中心。一些重点领域（如 :has()、容器查询和 inert 属性）涵盖了整个功能。其他功能（例如 Flexbox 上的测试）需要处理现有跨浏览器功能中的一些细微测试失败问题。

:has()

浏览器支持

  • 105
  • 105
  • 121
  • 15.4

来源

“这是 CSS 的父级选择器！我们几乎从一开始就提出了这样的要求，最终使其在所有浏览器中都得到了很好的实现，这意味着开发者需要运行更少的 JavaScript 来模拟此选择器。”- Thomas Steiner，Chrome 开发技术推广工程师。

关于功能伪类 :has()，人们一直非常期待，因为它向平台带来了开发者的一个关键请求。它为您提供了一个父级选择器，您可以根据该元素中的内容选择元素。不过，它的用途非常广泛。如“CSS 封装”中所述，您不仅可以选择父元素，还可以选择横向选择。

CSS :has() 演示：基座

Chrome 团队的开发技术推广工程师 Una Kravets 表示：

":has() 选择器是新近提供的最灵活、最强大的 CSS 功能之一。通过它，您可以根据子元素的存在、状态或偶数数量的子元素设置任何父元素的样式。更棒的是，您可以将它与其他组合器结合使用，为同级元素设置样式，从而真正实现更高的界面样式控制。这是一项非常灵活的功能！我已经看到了很多很棒的演示，这些演示可以减少利用 :has() 的强大功能时对其他脚本的依赖。"

正如 Chrome 软件工程师 Philip Jägenstedt 提醒我的那样，在 2023 年 CSS 现状问卷调查中询问时，开发者因缺乏支持而困扰的主要功能是 :has()。因此，我们并不是唯一有兴趣使用这项功能的人。

您可以听 Una 与 Adam Argyle 一起在 CSS 播客上探讨 has()，然后通过网络社区的这些帖子详细了解 :has()。

容器查询

浏览器支持

  • 105
  • 105
  • 110
  • 16

来源

2023 年对于曾经被认为不可能的事情来说是不可思议的一年。除了 :has() 之外，Web 平台最终还获得了对容器查询的跨浏览器支持。自 2011 年以来，您一直要求进行容器（或元素）查询，距离自适应设计概念的推出仅有一年时间。现在，该功能现已发布，并且适用于所有主要浏览器引擎。

Una 和 Adam 在 CSS 播客中讨论了容器查询，Una 则是在“浏览器设计”这一剧集中介绍容器查询的。社区也一直在分享大量的提示和想法。

子网格

浏览器支持

  • 117
  • 117
  • 71
  • 16

来源

Subgrid 是我最喜欢的 Interop 2023 功能之一。利用该方法，您可以在父元素上定义网格，然后在嵌套在该主网格内的网格上使用该父元素上定义的轨迹大小。得益于 Microsoft Edge 网络平台工程师的努力，subgrid 于 2023 年出现在所有主流浏览器引擎中，提高了 Chrome 的得分，并将这项激动人心的功能带给了所有人。

Chrome 开发者关系工程师 Adriana Jara 告诉我使用网格和 subgrid 如何更轻松地创建出色的界面

“我非常擅长视觉、布局、一致的外观和适应屏幕。不过，借助 grid 和 subgrid，我们可以创建出适用于多种屏幕尺寸并自动适应内容的设计！它是我最喜欢的工具，因为它满足了构建网站的基本需求，即使没有太多专业知识也能为用户提供良好的体验。”

我在 12 Days of Web 一篇文章中编写了 subgrid 的一些用例，与这篇博文中的其他功能一样，您可以收听一集 CSS 播客分集。还有许多来自网络的资源。

颜色空间和颜色函数

浏览器支持

  • 111
  • 111
  • 113
  • 15

来源

毫无疑问，Chrome CSS 开发者 Adam Argyle 告诉我颜色空间和功能是他最喜欢的功能，

“告别尴尬的 HSL 通道值变量数学问题；欢迎使用即时颜色变体单行代码。新的颜色空间和功能不仅解决了颜色工作流问题，还带来了更高级、可靠和鲜艳的色彩和渐变效果。解锁一些技能，同时让生活更轻松，这绝对是你不喜欢的事情。在互操作工具中加点调味料，这道菜看起来是五彩缤纷的美味佳肴。”

Adam 一直在创作一些精彩的内容来帮助您了解这些新功能，例如高清 CSS 颜色指南和 gradient.style，并且会谈论 CSS 播客中的颜色函数。

我们很高兴能够在所有主流浏览器引擎中使用这些功能。 请阅读这些精彩文章了解详情。

期待 Interop 2024

一旦功能变得具有互操作性，它们就会成为基准（最新提供）的一部分。我们很高兴看到 2023 年这个团队推出的新功能数量，这很大程度上要归功于 Interop 2023 所涉及的所有人的工作。我们很快会宣布 2024 年的选定重点领域，我们都期待看到 Web 平台在今年可以取得更好的发展。