了解 2024 年 7 月期间在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。
稳定版浏览器
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);
}
浏览器支持
您可以在博文 CSS 相对颜色语法中找到更多示例。相对颜色语法是 Interop 2024 的重点领域之一,因此此次更新有助于提高 Firefox 稳定版的得分。
content
属性的替代文本
Firefox 128 支持 CSS content
属性的替代文本(如果它包含图片)。替代文字会显示在无障碍树中。这意味着,所有浏览器现在都支持 content
的替代文本。
浏览器支持
Chrome 127 中的更新可以确保 Chrome 接受任意数量的元素(而不仅仅是单个字符串),例如能够使用 attr()
函数。
font-size-adjust
属性
Chrome 127 包含 font-size-adjust
,这也是 2024 年 Interop 大会的重点领域。
此属性在可能发生字体回退的情况下非常有用,因为它可以帮助您将回退字体大小与首选字体相匹配。
在此版本的 Chrome 中,font-size-adjust
属性将成为新推出的基准的一部分。
支持在 iframe 中使用 View Transition API
从 Chrome 127 开始,主框架和同源 iframe 中将支持同时进行同一文档视图转换。
以前,如果主框架同时运行转换,则无法在同源 iframe 中使用 document.startViewTransition 运行视图转换。系统会自动跳过 iframe 的转换。现在,这两种转场效果都会执行。
键盘可聚焦滚动容器
从 Chrome 127 开始,滚动条默认可点击聚焦和程序化地聚焦。默认情况下,没有可聚焦子项的滚动条可通过键盘聚焦。
如需详细了解这项变更,请参阅可接收键盘焦点的滚动条一文。
@property
规则
Firefox 128 支持 @property
规则和相关 JavaScript API。也就是说,您可以创建 CSS 自定义属性来定义语法、继承和初始值。
在以下示例中,自定义属性被定义为仅接受 <color>
值、不继承,并且初始值为 hotpink
。
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
@property
规则现已纳入“新推出的基准”中,如需了解详情,请参阅 @property:新一代 CSS 变量现已获得通用浏览器支持。
可调整大小的 ArrayBuffer
和可伸缩的 SharedArrayBuffer
Firefox 128 现在支持可调整大小的 ArrayBuffer 和可扩容的 SharedArrayBuffer,这样您无需分配新的缓冲区并将数据复制到其中,即可更改缓冲区的大小。这些属性也会加入 Baseline NewAvailable 属性。
Flexbox 属性中的 safe
关键字
Safari 17.6 主要用于修复现有功能,但也包含适用于 Flexbox 对齐属性的 safe
关键字。这样一来,safe
关键字便可在不同浏览器之间互操作。
浏览器支持
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 发布为稳定版,这些属性将成为“基准新可用”的一部分。