2024 年 10 月,全新 Web 平台推出

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

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

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

将鼠标悬停在头像上即可查看动画。此示例来自CSS 动画网格布局一文,您可以参阅该文了解详情。

浏览器支持

  • Chrome:107.
  • Edge:107。
  • Firefox:66.
  • Safari: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 版,您可以抢先体验即将推出的浏览器稳定版中提供的功能。在全球用户获得该版本之前,您可以先测试可能会影响您网站的新功能或移除的功能。本月的 Beta 版新品包括 Chrome 108Firefox 107Safari 16.2

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

figure {
    break-inside: avoid;
}

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

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

Chrome 中还新增了 CSS 视口单位。这些单位包括小单位(svwsvhsvisvbsvminsvmax)、大单位(lvwlvhlvilvblvminlvmax)、动态单位(dvwdvhdvidvbdvmindvmax)和逻辑单位(vivb)。这些单位已在 Firefox 和 Safari 中实现。

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

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

Safari 16.2 Beta 版包含一系列 CSS 修复,包括大小调整和滚动贴靠。

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