Interop 2024 年中更新

进入下半年,我们不妨回顾一下 2024 年互操作性大会今年如何提升 Web 互操作性的。

今年年初,Chrome 的实验性浏览器支持得分为 83。

显示以下得分的信息中心:Interop: 65、Investigations: 0、Chrome Canary: 83、Edge Dev: 82、Firefox Nightly: 80、Safari Technology Preview: 79。
2024 年 2 月的 Interop 2024 信息中心。
显示以下得分的信息中心:Interop: 75、Investigations: 5、Chrome Canary: 90、Edge Dev: 89、Firefox Nightly: 87、Safari Technology Preview: 88。
2024 年 6 月底的 2024 年互操作性信息中心信息中心。

目前,该得分为 90,自 6 月发布 Chrome 126 以来,稳定版浏览器的得分为 85。实验性互操作性总分提高了 10 分,本文将分享一些有助于提高该分数的功能。

弹出式窗口

弹出式窗口已于 2024 年 4 月成为“新推出的基准”的一部分。弹出式窗口很有趣,因为您需要构建的许多界面功能(例如菜单、提示、用于进行选择的叠加层和教程界面)都是弹出式窗口的一种。在推出弹出式窗口之前,若要创建上述任何功能,都需要大量的自定义代码。用于确保不会同时打开多个元素或在用户点击元素外部时启用轻量关闭的代码。您可能还曾遇到过 z-index 问题,想要确保某个界面元素始终位于界面其余部分之上。

Popover API 包含所有这些功能及更多功能,可节省开发时间,并帮助打造性能更出色且易于访问的界面。例如,以下代码会创建一个带有 light-dismiss 的 popover,该 popover 会在打开时自动关闭其他 popover。

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

如需了解详情,请参阅 Popover API 已发布到基准版。许多应用已经在享受 Popover 带来的好处。Tokopedia 利用该功能,为不受支持的浏览器使用了 polyfill,从而显著减少了 React 代码量

使用 @property 实现高级自定义属性

借助 @property CSS 规则,您可以创建高级自定义属性,其详细程度远远超出标准自定义属性中提供的名称和值。设置允许的语法以定义此属性所包含的数据类型,例如颜色、数字或长度。然后,设置属性是否继承以及初始值。

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

@property 规则目前会提高 Firefox 的实验分数,并在 Firefox 128 于本月底发布时提高稳定分数。它还会加入“新发布的基准”集合。

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 128.
  • Safari: 16.4.

Source

如需了解详情,请参阅 @property:为 CSS 变量赋予超级能力

font-size-adjust 属性

借助 CSS font-size-adjust 属性,您可以修改小写字母相对于大写字母的大小。在可能会发生字体回退的情况下,这非常有用,因为这有助于确保后备字体仍然清晰可辨,尤其是在字号较小时。

font-size-adjust 属性目前包含在 Chrome 的实验性得分中,但当其本月随 Chrome 127 一起发布时,将会提高稳定性得分。它还会加入“新推出的 Baseline”类别。

Browser Support

  • Chrome: 127.
  • Edge: 127.
  • Firefox: 3.
  • Safari: 16.4.

Source

text-wrap: balance

使用 text-wrap: balance 可指示浏览器为文本找出最佳平衡的换行方式。这对于标题特别有用,例如,可防止标题换行到第二行上的单个字词。

Safari 最近开始支持此功能,其他浏览器也在努力修正失败的测试,以确保此功能在所有浏览器中都能正常运行。

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

Source


除了这些主要功能实现互操作之外,我们还进行了许多其他改进。每项通过测试都表示您不会遇到的互操作性问题。我们很期待看到到今年年底,我们能达到 100% 的得分。