了解我们在 2022 年 11 月在稳定版和 Beta 版网络浏览器中推出的一些有趣功能。
浏览器稳定版
11 月,Firefox 107 和 Chrome 108 成为稳定版。我们来看看这对网络平台意味着什么。
Android 版 Chrome 中的布局视口行为发生了变化
从 Android 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
)、{19。vb
这些单元已在 Firefox 和 Safari 中实施,也就是说,现在我们已在三大主要浏览器引擎中实现了这些单元的互操作性。
请参阅大型、小型和动态视口单元。
浏览器支持
- 108
- 108
- 101
- 15.4
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) 为网络上的联合身份流程提供了抽象概念。它会显示一个由浏览器参与中介的对话框,供用户选择用于识别提供商的帐号以登录网站。FedCM 即将在 Chrome 108 中推出,请参阅 FedCM 公告博文了解详情。
Beta 版浏览器版本
通过 Beta 版浏览器,您可以预览浏览器下一个稳定版本的新功能。不妨趁此时机测试一下新功能或内容移除,这些新功能或内容可能会在全球发布之前对您的网站产生影响。鉴于发布日期,本月唯一新的 Beta 版是 Firefox 108,而 Safari 16.2 Beta 版仍在进行中。
Firefox 108 支持 <source>
元素的 height
和 width
属性,前提是该元素是 <picture>
元素的子元素。这些属性可接受图片的高度或宽度(以像素为单位),表示没有单位的整数。
在 Firefox 中正实施容器查询。在 Firefox 108 Beta 版中的 layout.css.container-queries.enabled
标志后面,您会看到容器查询长度单位:cqw
、cqh
、cqi
、cqb
、cqmin
、cqmax
。这些是相对于查询容器大小的长度单位。
“网络新体验”系列视频的一部分