全新推出:11 月份的网络平台

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

11 月,Firefox 107Chrome 108 均已发布稳定版。我们来看看这对 Web 平台意味着什么。

从 Android 上的 Chrome 108 开始,布局视口在显示屏幕键盘时的行为发生了变化。如需了解详情,请参阅为即将在 Android 版 Chrome 中发生的视口大小调整行为变更做好准备

Chrome 108 中还新增了 CSS 视口单位。这些单位包括小单位(svwsvhsvisvbsvminsvmax)、大单位(lvwlvhlvilvblvminlvmax)、动态单位(dvwdvhdvidvbdvmindvmax)和逻辑单位(vivb)。这些单元已在 Firefox 和 Safari 中实现,这意味着我们现在可以跨三个主要浏览器引擎使用这些单元。

阅读大型、小型和动态视口单元

浏览器支持

  • Chrome:108。
  • Edge:108。
  • Firefox:101.
  • Safari:15.4。

Firefox 107 支持 contain-intrinsic-size 简写 CSS 属性,以及长写法 contain-intrinsic-widthcontain-intrinsic-height 和逻辑属性 contain-intrinsic-block-sizecontain-intrinsic-inline-size

这些属性用于指定受尺寸限制的界面元素的大小。这样,用户代理便无需渲染元素的子元素即可确定元素的大小。当元素受尺寸限制时,它们非常有用。

浏览器支持

  • Chrome:83。
  • Edge:83.
  • Firefox:107。
  • Safari:17.

来源

支持 CSS 碎片化 avoid 关键字

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

figure {
    break-inside: avoid;
}

之所以添加此功能,是因为我们添加了使用 LayoutNG 的打印支持,这带来了现代化且 bug 更少的体验。详细了解 LayoutNG

Federated Credential Management API

Federated Credential Management API (FedCM) 为 Web 上的联合身份流程提供了抽象化功能。它会显示一个由浏览器中介的对话框,供用户从身份提供程序中选择账号以登录网站。FedCM 已在 Chrome 108 中发布,如需了解详情,请参阅 FedCM 公告博文

Beta 版浏览器

通过浏览器 Beta 版,您可以抢先体验即将推出的浏览器稳定版中提供的功能。在全球用户获得该版本之前,您可以先测试可能会影响您网站的新功能或移除的功能。由于发布日期,本月只有 Firefox 108 这一款新 Beta 版,Safari 16.2 Beta 版 仍在测试中。

Firefox 108 支持为 <source> 元素(如果它是 <picture> 元素的子元素)使用 heightwidth 属性。这些属性接受以像素为单位的整数形式的图片高度或宽度。

Firefox 正在实现容器查询。在 Firefox 108 Beta 版的 layout.css.container-queries.enabled 标志后面,您会看到容器查询长度单位 - cqwcqhcqicqbcqmincqmax。这些是相对于查询容器大小的长度单位。

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