Stable releases: Chrome 108 and Firefox 107

November 2022 saw stable releases of Chrome 108 and Firefox 107. A notable change in Chrome on Android concerns the Layout Viewport when the on-screen keyboard is displayed; developers should be aware of the new resize behavior.

Chrome 108 also brings the full set of new CSS viewport units to the platform. This includes small units (svw, svh, svi, svb, svmin, svmax), large units (lvw, lvh, lvi, lvb, lvmin, lvmax), dynamic units (dvw, dvh, dvi, dvb, dvmin, dvmax), and the logical units vi and vb. Since Firefox and Safari already supported these, cross-browser interop now exists across the major engines.

Size containment properties in Firefox 107

Firefox 107 adds support for the contain-intrinsic-size shorthand property alongside its longhands: contain-intrinsic-width, contain-intrinsic-height, contain-intrinsic-block-size, and contain-intrinsic-inline-size.

These properties specify the size that a UI element should be treated as having when it is subject to size containment. The browser can determine the element's size without rendering its children, which is helpful for performance.

Fragmentation control when printing in Chrome 108

Chrome 108 introduces support for the avoid value in the fragmentation properties break-before, break-after, and break-inside. When set, the browser avoids breaking the page before, after, or within the targeted element during printing. For instance:

figure {
    break-inside: avoid;
}

This works thanks to the new print path built on LayoutNG, which improves reliability in paginated output.

Federated Credential Management API ships

Chrome 108 also ships the Federated Credential Management API (FedCM). It offers a browser-managed dialog so users can choose an account from an identity provider during sign-in, providing a standard abstraction for federated identity flows.

Beta channel: Firefox 108

November beta activity centers on Firefox 108 (Safari 16.2 beta remains ongoing). In this release, Firefox supports height and width attributes on the <source> element when it is a child of a <picture> element. These define the image dimensions in pixels as unitless integers.

Firefox is also working toward container queries. Behind the layout.css.container-queries.enabled flag in Firefox 108 beta, developers can test the container query length units: cqw, cqh, cqi, cqb, cqmin, and cqmax. These units are relative to the size of a query container.