Interop 2023 年 10 月更新

2023 年最后一个季度,我们已进入 2023 年最后一个季度,所有浏览器在 Interop 2023 重点领域都取得了很大的进展。在本文中,您可以了解 2023 年互操作性得分截至目前的得分,以及因今年的努力而现在可用的功能。

2023 年 1 月的状态

2023 年 1 月,我们宣布推出 2023 年互操作性,以及所有引擎在今年将努力改进的 26 个重点领域。

实验性浏览器发布时的总体 Interop 得分为 62。

互操作性总体得分:62;调查结果:0;每个浏览器的得分:86 分(Chrome 和 Edge)、74 分(Firefox)、86(Safari 技术预览)。
Interop 2023 信息中心(2023 年 1 月 31 日的屏幕截图)。

截至 2023 年 10 月的状态

实验性浏览器的总体 Interop 得分为 89。如果您切换到稳定视图,并查看稳定浏览器中已有的功能,得分就是 75 分。这个得分背后是很多现在已应用于主流引擎的因素。其中一些只是细微的互操作性修复,但也包含一些主要功能。

互操作性总体得分:89,调查结果:66;每个浏览器的得分:Chrome 和 Edge 的得分为 97,Firefox 的得分为 93,Safari 技术预览的得分为 95。
Interop 2023 信息中心(屏幕截图:2023 年 10 月 30 日)。

大小容器查询和容器查询长度值

2 月,我们庆祝了大小容器查询变得具有互操作性。对 Web 开发者来说,这是一项期待已久的功能。能够如此快地在所有引擎中提供此功能,对 Web 平台而言意义非凡。

浏览器支持

  • 105
  • 105
  • 110
  • 16

来源

除了大小容器查询,还有容器查询单元。它们的使用方式与视口单元(例如 vw)相同,但区别在于它们与容器相关,而不是与视口相关。

浏览器支持

  • 105
  • 105
  • 110
  • 16

颜色空间和函数

5 月,颜色空间 Lab、LCH、Oklab 和 Oklch 开始实现互操作支持。CSS 函数表示法 lab()lch()oklab()oklch() 为开发者提供了一种使用这些颜色空间的方法。此外,还包含函数表示法 color()color-mix()

浏览器支持

  • 111
  • 111
  • 113
  • 15

来源

您可以在高清 CSS 颜色指南中详细了解这些新的颜色空间和函数。

子网格

CSS 网格布局的 subgrid 功能是 grid-template-columnsgrid-template-rows 的新值,可让嵌套网格使用父级网格中的轨迹定义。这意味着,您可以对齐网格结构中嵌套的内容。

浏览器支持

  • 117
  • 117
  • 71
  • 16

来源

详细了解 subgrid。如需了解导致子网格实现难以实现的一些复杂性,请观看 BlinkOn 18 上的这个视频

HTML inert 属性

HTML inert 全局属性表示您可以将网页的某些部分标记为 inert。这样可以阻止点击和聚焦事件,并会在无障碍树中隐藏相应元素及其内容。例如,这对于视觉上位于屏幕之外的内容非常有用,因此对于屏幕阅读器来说也应处于非活动状态。

浏览器支持

  • 102
  • 102
  • 112
  • 15.5

来源

此外,还有

除了这些主要功能之外,今年我们还在浏览器上推出了许多其他功能和修复程序。今年剩下的时间里会发布一些浏览器版本,所有得分都落实后,我们会发布完整的摘要。