探索 2022 年 10 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。
浏览器稳定版
10 月，Firefox 106、Chrome 107 和 Safari 16.1 成为稳定版。我们来看看这对网络平台意味着什么。
网格轨迹的动画
多亏 Microsoft 贡献者的努力，Chrome 现在能够插值 grid-template-columns 和 grid-template-rows 值。这意味着网格布局可以在状态之间平滑过渡，而不是在动画或过渡的一半处贴靠。
浏览器支持
- 107
- 107
- 66
- 16
对 getDisplayMedia() 的新增内容
此外，Chrome 还为 getDisplayMedia() 添加了一些新功能，以防止屏幕共享时意外过度共享。
displaySurface选项可以指明 Web 应用首选提供特定的显示界面类型（标签页、窗口或屏幕）。surfaceSwitching选项用于指明 Chrome 是否应允许用户在共享标签页之间动态切换。selfBrowserSurface选项可用于禁止用户共享当前标签页。这样可以避免“镜厅”效果。systemAudio选项可确保 Chrome 仅向用户提供相关的音频捕获功能。
Safari 16.1 还支持 getDisplayMedia，从而添加对捕获特定 Safari 窗口的支持。
测试对 CSS 字体技术和功能的支持情况
Firefox 已通过 @supports 向功能查询中添加了 font-tech() 和 font-format() 函数。以下示例测试是否支持 COLRv1 字体。
@supports font-tech(color-COLRv1) {
}
您可以在 MDN 上找到更多示例。
滚动到文本片段
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 API 和 Notifications API，如需详细了解此功能，请参阅 Meet Web Push 一文。Safari 中的 Web 推送登录意味着，现已支持所有三大引擎。
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 中被替换元素的溢出变化一文。
当屏幕键盘显示时，布局视口在 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)、{19。vb这些单元已在 Firefox 和 Safari 中实施。
Firefox 107 支持 COLRv1 字体，与 Chrome 一起支持这种字体技术。此外，在字体中，Chrome 108 还通过 @supports 向功能查询添加了对 font-tech() 和 font-format() 函数的支持。
Firefox 还增加了对 contain-intrinsic-size 的支持，让 Chrome 也支持这一功能。
Safari 16.2 Beta 版包含大量 CSS 修复，包括大小调整和滚动贴靠。
“网络新体验”系列视频的一部分