去年年底,Interop 2023 圆满结束。浏览器供应商和其他各方共同努力,旨在创建一个更具互操作性的网络,减少浏览器之间的差异,避免给您带来困扰。这篇文章分享了最终结果,以及 Chrome 团队最喜欢的一些功能。
最终得分

很高兴看到这么多绿色,与 2023 年初的得分相比,我们已经取得了长足的进步,每个浏览器的得分都大幅提高。
我们对什么感到兴奋?
在 Interop 2023 仪表板上查找 2023 年重点领域的完整列表。一些重点领域(例如 :has()
、容器查询和 inert
属性)涵盖了整个功能。其他领域,例如在 Flexbox 上的工作,则处理了现有跨浏览器功能中的一些细微的测试失败。
:has()
“CSS 终于有了父选择器!这是从一开始就被要求的功能,最终在所有浏览器中都实现真是太棒了,这意味着开发者需要运行更少的 JavaScript 来模拟这个选择器。”—Chrome 开发者关系工程师 Thomas Steiner。
功能性伪类 :has()
引起了极大的兴奋,因为它为平台带来了开发者的一个关键需求。它为您提供了一个父选择器——您可以根据元素内部的内容来选择元素。但是,它的用途远不止于此。正如 CSS wrapped 中解释的那样,您可以选择的不仅仅是父元素,甚至可以进行横向选择。
:has()
演示:DockChrome 团队的开发者关系工程师 Una Kravets 解释说
“:has() 选择器是最新可用的 CSS 功能中最灵活和强大的功能之一。使用它,您可以根据子元素的存在、状态甚至数量来设置任何父元素的样式。更重要的是,您可以将其与其他组合器结合使用来设置兄弟元素的样式,并真正获得对 UI 的全新样式控制级别。这是一个非常灵活的功能!我已经看到很多很酷的演示,它们在使用 :has() 的强大功能时减少了对额外脚本的依赖。”
正如 Chrome 的软件工程师 Philip Jägenstedt 提醒我的那样,在 2023 年 CSS 现状调查中被问及时,:has()
是开发者因缺乏支持而最难使用的功能。因此,我们并不是唯一对这个功能可用感到兴奋的人。
您可以收听 Una 和 Adam Argyle 在 CSS Podcast 上谈论 has()
,然后从 Web 社区的这些文章中了解更多关于 :has()
的信息。
容器查询
事实证明,2023 年对于曾经被认为不可能的事情来说是伟大的一年。除了 :has()
之外,Web 平台最终还获得了对容器查询的跨浏览器支持。自 2011 年以来,您一直在要求使用容器(或元素)查询,那是在响应式设计的概念被引入仅仅一年之后。现在,它来了,并且在所有主要浏览器引擎中都可用。
Una 和 Adam 在 CSS Podcast 中讨论了容器查询,Una 在“在浏览器中设计”的一集中介绍了它们。社区也分享了大量的技巧和想法。
子网格
子网格是我最喜欢的 Interop 2023 的内容。它允许您在父元素上定义网格,然后在嵌套在该主网格内部的网格上使用在该父元素上定义的轨道大小。感谢 Microsoft Edge 的 Web 平台工程师的工作,子网格在 2023 年期间在所有主要浏览器引擎中都可用,以提高 Chrome 的得分,并将这个令人兴奋的功能带给所有人。
Chrome 开发者关系工程师 Adriana Jara 告诉我网格和子网格如何让创建出色的 UI 变得更容易,
“我不擅长视觉效果、布局、保持一致的外观以及适应屏幕。但是通过网格和子网格,以某种方式创建出跨多种屏幕尺寸工作并自动适应内容的设计是可能的!它是我最喜欢的,因为它解决了创建一个网站的基本需求,即在不需要大量专业知识的情况下为用户提供良好的体验。”
我在一篇为 12 Days of Web 撰写的文章中写了一些子网格的用例,并且与这篇文章中的其他功能一样,您可以收听一集关于它的 CSS 播客。Web 上也有很多资源。
色彩空间和函数
Chrome CSS 开发者 Adam Argyle 告诉我色彩空间和函数是他最喜欢的功能,这并不令人意外,
“告别笨拙的 HSL 通道值变量数学运算;欢迎使用即时颜色变体单行代码。新的色彩空间和函数不仅解决了颜色工作流程问题,还带来了对更高级、更可靠和更鲜艳的颜色和渐变的访问。在释放某些能力的同时让您的生活更轻松,有什么理由不喜欢呢?撒上 Interop 努力的调味品,这道菜真是色彩缤纷,令人愉悦。”
Adam 一直在创建一些令人惊叹的内容来帮助您理解这些新功能,例如 高清 CSS 颜色指南 和 gradient.style,并在 CSS Podcast 上谈论颜色函数。
很高兴这些功能在所有主要浏览器引擎中都可用。在这些精彩的文章中了解更多信息。
展望 Interop 2024
一旦功能变得可互操作,它们就会成为 Baseline 的一部分——新近可用。很高兴看到 2023 年期间加入该组的新功能数量,这在很大程度上归功于所有参与 Interop 2023 的人的工作。很快将宣布 2024 年选定的重点领域,我们都期待看到 Web 平台今年会变得更好。