7 月新增 Web 平台

了解 2024 年 7 月期间在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。

2024 年 7 月,Firefox 128Safari 17.6Chrome 127 已稳定发布。本文将介绍 Web 平台中新增的功能。

Firefox 128 包含 CSS 相对颜色语法,可让您创建相对于原始颜色的颜色。以下 CSS 使用 hsl() 将颜色 indigo 的饱和度降低了一半。

.desaturate-by-half {
  background: hsl(from indigo h calc(s / 2) l);
}

Browser Support

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 128.
  • Safari: 18.

您可以在博文 CSS 相对颜色语法中找到更多示例。相对颜色语法是 Interop 2024 的重点领域之一,因此此更新有助于提高稳定版 Firefox 的分数。

content 属性的替代文本

Firefox 128 支持为包含图片的 CSS content 属性提供替代文本。替代文字会显示在无障碍树中。这意味着,所有浏览器现在都支持 content 的替代文本。

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 128.
  • Safari: 17.4.

Chrome 127 中的更新可确保 Chrome 接受任意数量的元素,而不仅仅是单个字符串,例如,支持使用 attr() 函数。

font-size-adjust 属性

Chrome 127 包含 font-size-adjust,这也是 2024 年 Interop 大会的重点领域。 在可能会发生字体回退的情况下,此属性非常有用,因为它有助于您将回退字体的大小与首选字体相匹配。

Browser Support

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

Source

在此版本的 Chrome 中,font-size-adjust 属性将成为新推出的基准的一部分。

支持在 iframe 中使用 View Transition API

从 Chrome 127 开始,主框架和同源 iframe 中将支持同时进行同一文档视图转换。

以前,如果主框架同时运行转换,则无法在同源 iframe 中使用 document.startViewTransition 运行视图转换。系统会自动跳过 iframe 的转换。现在,这两种转场效果都会执行。

键盘可聚焦滚动容器

从 Chrome 127 开始,滚动条默认可点击聚焦和程序化地聚焦。默认情况下,没有可聚焦子项的滚动条可通过键盘聚焦。

如需详细了解这项变更,请参阅可接收键盘焦点的滚动条一文。

@property 规则

Firefox 128 支持 @property 规则和相关 JavaScript API。这意味着,您可以创建 CSS 自定义属性来定义语法、继承和初始值。

Browser Support

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

Source

在以下示例中,自定义属性被定义为仅接受 <color> 值、不继承,并且初始值为 hotpink

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

@property 规则现已纳入“新推出的基准”中,如需了解详情,请参阅 @property:新一代 CSS 变量现已获得通用浏览器支持

可调整大小的 ArrayBuffer 和可伸缩的 SharedArrayBuffer

Firefox 128 现在支持可调整大小的 ArrayBuffer 和可扩容的 SharedArrayBuffer,这样您无需分配新的缓冲区并将数据复制到其中,即可更改缓冲区的大小。这些房源也会加入“新上架基准价格”类别。

Browser Support

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

Source

Flexbox 属性中的 safe 关键字

Safari 17.6 主要用于修复现有功能,但也包含适用于 Flexbox 对齐属性的 safe 关键字。这样一来,safe 关键字便可在不同浏览器之间互操作。

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: 63.
  • Safari: 17.6.

safe 关键字可防止所选对齐方式导致内容显示在可视区域之外。以下 CodePen 展示了此属性在居中对齐的项中的行为方式。如果 center 对齐导致数据丢失,则改用 start

Beta 版浏览器

通过浏览器 Beta 版,您可以预览下一个稳定版浏览器中将推出的内容。在该版本面向全球发布之前,您可以先测试可能会影响您网站的新功能或移除的功能。新版 Beta 版为 Firefox 129Chrome 128Safari 18 Beta 版测试仍在进行中。这些版本为该平台带来了许多出色的功能。如需了解所有详情,请参阅版本说明。下面仅列举了其中的几个亮点。

Chrome 128 包含 CSS ruby-align 属性,并进行了一些更改,以便在具有 display: ruby 的元素中实现换行,zoom 属性也已更新为符合规范。AudioContext API 进行了更新,添加了分配给 AudiContext.onerror 的回调,用于报告 AudioContext 创建和渲染错误。

Firefox 129 包含 @starting-style 规则和 transition-behavior 属性。在 Firefox 129 发布为稳定版后,这些属性将成为“新推出的基准”的一部分。