9 月新增 Web 平台

探索 2022 年 9 月在稳定版和 Beta 版网络浏览器中登陆的有趣功能。

Rachel Andrew

浏览器稳定版

9 月，Firefox 105、Chrome 106 和 Safari 16 成为稳定版。这意味着 9 月份的这篇博文分享了 Web 平台的一些令人兴奋的事情。

容器查询

Safari 16 增加了对容器查询的支持，该功能目前在两个引擎中提供。Safari 还添加了对新的容器查询单元的支持。

浏览器支持

  • 105
  • 105
  • 110
  • 16

来源

网格布局

Safari 现在支持 subgrid 值 grid-template-columns 和 grid-template-rows。在同时也是网格项的网格上使用此值意味着，网格会使用其跨越父级轨迹的轨迹，而不是定义新的轨迹。

在 Safari 或 Firefox 中，这些卡片中的页眉和页脚将对齐，因为它们的轨迹是父级的子网格。

浏览器支持

  • 117
  • 117
  • 71
  • 16

来源

此外，在 Safari 中，对于网格布局，还可以为网格轨迹添加动画效果。

浏览器支持

  • 107
  • 107
  • 66
  • 16

Safari 还添加了对 offset-path、overscroll-behavior、text-align-last 和 分辨率媒体查询的支持。

编码 API

Firefox 105 支持 Encoding API 的 TextDecoderStream 和 TextEncoderStream 接口。

浏览器支持

  • 71
  • 79
  • 105
  • 14.1

来源

新的 Intl API

Intl API 有助于以本地化的格式显示内容，并且 Chrome 106 添加了大量新的数字格式功能。

与其他 Intl API 一样，这会将负担转移至系统，因此您无需向每位用户发布或维护复杂的本地化代码。该 API 知道货币符号的位置、如何设置日期和时间的格式，或编译列表。

showPicker() 方法

Safari 16 包含 showPicker() 方法，该方法包含一种规范方法，可针对日期、时间、颜色和文件显示浏览器选择器。如需了解详情，请参阅在浏览器选择器中显示日期、时间、颜色和文件。

Beta 版浏览器版本

通过 Beta 版浏览器，您可以预览浏览器下一个稳定版本的新功能。不妨趁此时机测试一下新功能或内容移除，这些新功能或内容可能会在全球发布之前对您的网站产生影响。本月的新 Beta 版是 Chrome 107、Safari 16.1 和 Firefox 106。

Chrome 107 包含为网格轨道添加动画效果的功能，该功能本月也已在 Safari 中推出。当此功能在 Chrome 中推出后，三大主要引擎均支持此功能。

此外，Chrome 还为 getDisplayMedia() 添加了一些新功能，以防止屏幕共享时意外过度共享。

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

Safari 16.1 额外修复了 display: contents 的无障碍功能，修复了动态视口高度 (dvh) 单位，并支持滚动到文本 fragment。

“网络新体验”系列视频的一部分