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

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

Rachel Andrew

稳定版浏览器

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

Android 版 Chrome 中的布局视口行为发生了变化

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

新的视口单元

Chrome 108 中还新增了 CSS 视口单位。这些单元包括小单元（svw、svh、svi、svb、svmin、svmax）、大单元（lvw、lvh、lvi、lvb、lvmin、lvmax）、动态单元（dvw、dvh、dvi、dvb、dvmin、dvmax）和逻辑单元（vi、vb）。这些单元已在 Firefox 和 Safari 中实现，这意味着我们现在可以跨三个主要浏览器引擎使用这些单元。

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

浏览器支持

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

Firefox 107 支持 contain-intrinsic-size 简写 CSS 属性，以及长写法 contain-intrinsic-width、contain-intrinsic-height 和逻辑属性 contain-intrinsic-block-size 和 contain-intrinsic-inline-size。

这些设置旨在指定受大小限制约束的界面元素的大小。这样，用户代理便无需渲染元素的子元素即可确定元素的大小。当元素需要遵循尺寸包含机制时，这种样式就很有用。

浏览器支持

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

来源

支持 CSS 碎片化 avoid 关键字

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

figure {
    break-inside: avoid;
}

添加这一功能是因为添加了使用 LayoutNG 实现打印支持，从而带来了更现代、更少错误的体验。详细了解 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> 元素的子元素）使用 height 和 width 属性。这些属性接受以像素为单位的整数形式的图片高度或宽度。

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

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