2022 年 10 月，全新 Web 平台推出

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

Rachel Andrew

稳定版浏览器

10 月份，Firefox 106、Chrome 107 和 Safari 16.1 均已稳定发布。我们来看看这对 Web 平台意味着什么。

网格轨迹的动画

得益于我们在 Microsoft 贡献者的努力，Chrome 现在能够插入 grid-template-columns 和 grid-template-rows 值。这意味着网格布局可以在状态之间顺畅过渡，而不是在动画或转换的中间点贴靠。

将鼠标悬停在头像上以查看动画。如需了解详情，请参阅 CSS 动画网格布局一文。

浏览器支持

• 107
• 107
• 66
• 16

getDisplayMedia()的新增内容

此外，Chrome 还对 getDisplayMedia() 进行了一些添加，旨在防止在屏幕共享时意外过度分享。

• displaySurface 选项可以指明 Web 应用更倾向于提供特定的显示 Surface 类型（标签页、窗口或屏幕）。
• surfaceSwitching 选项表示 Chrome 是否应允许用户在共享标签页之间动态切换。
• selfBrowserSurface 选项可用于禁止用户共享当前标签页。这样可以避免出现“镜厅”效应。
• systemAudio 选项可确保 Chrome 仅向用户提供相关的音频捕获内容。

Safari 16.1 还支持 getDisplayMedia，增加了对捕获特定 Safari 窗口的支持。

测试是否支持 CSS 中的字体技术和功能

Firefox 已将 font-tech() 和 font-format() 函数添加到使用 @supports 的功能查询中。以下示例测试是否支持 COLRv1 字体。

@supports font-tech(color-COLRv1) {

}

您可以在 MDN 上找到更多示例。

滚动到文本 fragment

Safari 16.1 支持滚动到文本片段，这增加了对导航到指定了特定文本片段的网址的支持。

AVIF 支持

Safari 16 支持静态 AVIF 图片，Safari 16.1 支持 macOS Ventura、iOS 16 和 iPadOS 16 上的动画 AVIF 图片。

适用于 Safari 的 Web 推送

Safari 16.1 为 macOS Ventura 上的 Safari 引入了 Web Push 支持。这需要使用 Push API 和 Notifications API，您可以参阅认识 Web Push一文，详细了解相关信息。Web Push 在 Safari 中上线，意味着该功能现已在三大主要引擎中推出。

Beta 版浏览器

通过浏览器 Beta 版，您可以抢先体验即将推出的浏览器稳定版中提供的功能。在全球用户获得该版本之前，您可以先测试可能会影响您网站的新功能或移除的功能。本月的新测试版包括 Chrome 108、Firefox 107 和 Safari 16.2。

Chrome 108 在打印时支持 CSS 碎片化属性 break-before、break-after 和 break-inside 的 avoid 值。此值会告知浏览器避免在应用于的元素之前、之后或内部换行。例如，以下 CSS 可避免图表在分页符处被分段。

figure {
    break-inside: avoid;
}

Chrome 108 开始更改了替换元素的溢出行为方式，这在某些情况下可能会导致视觉变化。如需了解详情并了解如何解决您遇到的任何问题，请参阅CSS 中替换元素的 overflow 属性发生了变化一文。

在 Android 版 Chrome 中，当系统显示屏幕键盘时，布局视口的行为发生了变化。如需了解详情并了解如何为下个月将此变更发布到稳定版做好准备，请参阅为 Android 版 Chrome 即将发生的视口大小调整行为变更做好准备。

Chrome 中还新增了 CSS 视口单位。这些单元包括小单元（svw、svh、svi、svb、svmin、svmax）、大单元（lvw、lvh、lvi、lvb、lvmin、lvmax）、动态单元（dvw、dvh、dvi、dvb、dvmin、dvmax）和逻辑单元（vi、vb）。这些单元已在 Firefox 和 Safari 中实现。

Firefox 107 启用了 COLRv1 字体支持，与 Chrome 一起支持这种字体技术。此外，在字体方面，Chrome 108 增加了对 font-tech() 和 font-format() 函数的支持，以便使用 @supports 进行功能查询。

Firefox 还添加了 contain-intrinsic-size 支持，与 Chrome 一起成为支持此功能的两款浏览器。

Safari 16.2 Beta 版包含大量 CSS 修复，包括大小调整和滚动贴靠。

“新手入门 Web 系列”的一部分