7 月新增 Web 平台

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

Rachel Andrew

稳定版浏览器

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

CSS 相对颜色语法

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

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

浏览器支持

  • Chrome：119。
  • Edge：119。
  • Firefox：128.
  • Safari：16.4。

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

content 属性的替代文本

Firefox 128 支持 CSS content 属性的替代文本（如果它包含图片）。替代文字会显示在无障碍树中。这意味着，所有浏览器现在都支持 content 的替代文本。

浏览器支持

  • Chrome：77.
  • Edge：79。
  • Firefox：128.
  • Safari：17.4.

Chrome 127 中的更新可以确保 Chrome 接受任意数量的元素（而不仅仅是单个字符串），例如能够使用 attr() 函数。

font-size-adjust 属性

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

浏览器支持

  • Chrome：127.
  • 边缘：127。
  • Firefox：3.
  • Safari：16.4。

来源

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

支持在 iframe 中使用 View Transition API

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

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

键盘可聚焦滚动容器

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

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

@property 规则

Firefox 128 支持 @property 规则和相关 JavaScript API。也就是说，您可以创建 CSS 自定义属性来定义语法、继承和初始值。

浏览器支持

  • Chrome：85.
  • Edge：85。
  • Firefox：128。
  • Safari：16.4.

来源

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

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

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

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

Firefox 128 现在支持可调整大小的 ArrayBuffer 和可扩容的 SharedArrayBuffer，这样您无需分配新的缓冲区并将数据复制到其中，即可更改缓冲区的大小。这些属性也会加入 Baseline NewAvailable 属性。

浏览器支持

  • Chrome：111。
  • Edge：111.
  • Firefox：128.
  • Safari：16.4。

来源

Flexbox 属性中的 safe 关键字

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

浏览器支持

  • Chrome：115.
  • Edge：115。
  • Firefox：63.
  • Safari：17.6。

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

浏览器测试版

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

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

Firefox 129 包含 @starting-style 规则和 transition-behavior 属性。一旦 Firefox 129 发布为稳定版，这些属性将成为“基准新可用”的一部分。