探索 2023 年 7 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。
浏览器稳定版
2023 年 7 月，Firefox 115 和 Chrome 115 成为稳定版。这篇博文探讨了这对网络平台的影响。
CSS display 属性具有多个值
Chrome 115 为 CSS display 属性添加了多个值。这意味着，display: flex 将变为 display: block flex，display: block 将变为 display: block flow。单个值作为旧关键字保留，这些值现在可用于三大引擎中。
浏览器支持
- 115
- 115
- 70
- 15
滚动条驱动的动画
在 Chrome 115 中，还有针对网页动画规范的 ScrollTimeline 和 ViewTimeline 扩展。这些库通过 CSS 和 JavaScript 实现滚动驱动的动画。
Privacy Sandbox API
Chrome 115 中附带的 Privacy Sandbox 相关性和效果衡量 API。包括 Topics API、Protected Audience API、Attribution Reporting API、Private Aggregation API、共享存储空间和 Fenced Frames API。
如需详细了解这些 API，请观看 Privacy Sandbox 演示。
animation-composition 属性
Firefox 115 支持 CSS animation-composition 属性。使所有三个主要引擎都支持 animation-composition。如需了解详情，请参阅指定如何将多个动画效果与 Animation-composition 进行合成。
数组方法
此外，还有一组适用于 Array 和 TypedArray 的方法来实现与 Firefox 115 的互操作性。Array.toReversed()、Array.toSorted()、Array.toSpliced()、Array.with()、TypedArrays.toReversed()、TypedArrays.toSorted() 和 TypedArrays.with() 会返回一个包含已浅层复制的元素的新数组。
Beta 版浏览器版本
通过 Beta 版浏览器，您可以预览浏览器下一个稳定版本的新功能。不妨趁此时机测试一下新功能或内容移除，这些新功能或内容可能会在全球发布之前对您的网站产生影响。新的 Beta 版功能是 Firefox 116 和 Chrome 116。Safari 17 和 Safari 16.6 Beta 版仍在开发中。这些版本为平台带来了许多很棒的功能。如需了解所有详细信息，请查看版本说明，以下是一些亮点。
Firefox 116 在所有平台（Android 除外）上支持 Audio Output Devices API。此 API 允许 Web 应用将音频输出重定向到允许的蓝牙耳机、扬声器或其他设备，而无需使用浏览器或底层操作系统默认设置。
Chrome 116 包含 CSS Motion Path，可让任何图形对象沿开发者指定的路径为其添加动画效果。这样一来，便可以使用许多强大的新转换方式，例如使用极坐标（通过 ray() 函数）而非 translate() 函数使用的标准矩形坐标进行定位，或为元素沿定义的路径添加动画效果。这样可以更轻松地定义复杂精美的 2D 空间过渡。路径可以指定为 circle()、ellipse()、rect()、inset()、xywh()、polygon()、ray() 和 url()。
Chrome 116 中还有 Document Picture-in-Picture API。这样便可启用可填充任意 HTMLElement 且始终位于顶层的窗口。这是对现有 HTMLVideoElement API 的扩展，该 API 仅允许将 HTMLVideoElement 置于画中画 (PiP) 窗口中。
“网络新体验”系列视频的一部分