了解 2022 年 11 月在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。
稳定版浏览器
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 中实现,这意味着我们现在可以跨三个主要浏览器引擎使用这些单元。
阅读大型、小型和动态视口单元。
浏览器支持
Firefox 107 支持 contain-intrinsic-size
简写 CSS 属性,以及长写法 contain-intrinsic-width
、contain-intrinsic-height
和逻辑属性 contain-intrinsic-block-size
和 contain-intrinsic-inline-size
。
这些属性用于指定受尺寸限制的界面元素的大小。这样,用户代理便无需渲染元素的子元素即可确定元素的大小。当元素受尺寸限制时,它们非常有用。
支持 CSS 碎片化 avoid
关键字
Chrome 108 在打印时支持 CSS 碎片化属性 break-before
、break-after
和 break-inside
的 avoid
值。此值会告知浏览器避免在应用于的元素之前、之后或内部换行。例如,以下 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>
元素的子元素)使用 height
和 width
属性。这些属性接受以像素为单位的整数形式的图片高度或宽度。
Firefox 正在实现容器查询。在 Firefox 108 Beta 版的 layout.css.container-queries.enabled
标志后面,您会看到容器查询长度单位 - cqw
、cqh
、cqi
、cqb
、cqmin
、cqmax
。这些是相对于查询容器大小的长度单位。