探索稳定版和 Beta 版的一些有趣功能 网络浏览器数量。
稳定版浏览器
2024 年 7 月，Firefox 128、 Safari 17.6 和 Chrome 127 现已稳定。 这篇博文介绍了 Web 平台中新增的功能。
<ph type="x-smartling-placeholder">CSS 相对颜色语法
Firefox 128 包含
CSS 相对颜色语法
这样您可以创建相对于原点颜色的颜色。
以下 CSS 会使用 hsl() 将 indigo 颜色的饱和度减半。
.desaturate-by-half {
background: hsl(from indigo h calc(s / 2) l);
}
浏览器支持
- 119
- 119
- 128
- 16.4
您可以在这篇博文中找到更多示例 CSS 相对颜色语法。 相对颜色语法是 Interop 2024 的重点领域之一， 因此，此次更新有助于提高 Firefox 稳定版的得分。
content 属性的替代文本
Firefox 128 支持 CSS content 属性的替代文本，
。替代文本会向无障碍树公开。
这意味着，所有浏览器现在均支持 content 的替代文本。
浏览器支持
- 77
- 79
- 128
- 17.4
Chrome 127 中的更新可确保 Chrome 接受任意数量的
元素，而不是单个字符串，从而让您能够使用 attr()
函数。
font-size-adjust 属性
Chrome 127 包含 font-size-adjust，这也是 Interop 2024 的一个重点领域。
当可能会发生字体回退时，此属性非常有用，
因为它有助于您将后备字体大小与首选字体相匹配。
在此 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
可调整大小 ArrayBuffer 且可扩展 SharedArrayBuffer 支持 Firefox 128、 允许更改缓冲区的大小，而无需分配 新缓冲区并将数据复制到其中。 这些属性也会加入 Baseline NewAvailable 属性。
Flexbox 属性中的 safe 关键字
Safari 17.6 主要是对现有功能的修复版本，
不过，它还包含用于 Flexbox 对齐属性的 safe 关键字。
这样，safe 关键字就可以跨浏览器互操作。
浏览器支持
- 115
- 115
- 63
- 18
safe 关键字
可防止所选的对齐方式导致内容显示在
可见区域。下面的 CodePen 展示了它是如何工作的，
其中包含居中对齐的项。如果 center 对齐导致数据丢失，则
改用 start。
浏览器测试版
通过测试版浏览器，您可以预览 稳定版的浏览器。这是测试新功能的好时机 可能会对您的网站造成不利影响。新 测试版 Firefox 129 和 Chrome 128。通过 Safari 18 测试版仍在进行中 这些版本为平台带来了许多出色的功能。查看发行作品 所有详细信息以下是几个亮点。
Chrome 128 包含 CSS ruby-align 属性，以及对
在包含 display: ruby（即
zoom 属性也已更新，以符合规范。还有
更新了 AudioContext API，以添加分配给
AudiContext.onerror，用于报告 AudioContext 创建和呈现错误。
Firefox 129 包含 @starting-style 规则和 transition-behavior
属性。这些媒体资源将纳入 Baseline 新推出一次
Firefox 129 已发布稳定版。