了解我们在 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。这些是相对于查询容器大小的长度单位。
“网络新体验”系列视频的一部分