了解 2022 年 10 月在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。
稳定版浏览器
10 月份,Firefox 106、Chrome 107 和 Safari 16.1 均已稳定发布。我们来看看这对 Web 平台意味着什么。
网格轨道的动画
得益于 Microsoft 贡献者的努力,Chrome 现在可以插值 grid-template-columns
和 grid-template-rows
值。这意味着网格布局可以在状态之间顺畅过渡,而不是在动画或转换的中间点贴靠。
浏览器支持
对 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 版,您可以抢先体验即将推出的浏览器稳定版中提供的功能。在全球用户获得该版本之前,您可以先测试可能会影响您网站的新功能或移除的功能。本月的 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 为使用 @supports
的功能查询添加了对 font-tech()
和 font-format()
函数的支持。
Firefox 还添加了 contain-intrinsic-size
支持,与 Chrome 一起成为支持此功能的两款浏览器。
Safari 16.2 Beta 版包含一系列 CSS 修复,包括大小调整和滚动贴靠。