New to the web platform in November

Discover some of the interesting features that landed in stable and beta web browsers during November 2022.

Rachel Andrew

Stable browser releases

In November, Firefox 107, and Chrome 108 became stable. Let's take a look at what this means for the web platform.

A change to Layout Viewport behavior in Chrome on Android

There's a change to how the Layout Viewport behaves from Chrome 108 on Android when the on-screen keyboard is shown. Read Prepare for viewport resize behavior changes coming to Chrome on Android to learn more.

New viewport units

Also in Chrome 108 are the new CSS Viewport Units. These include small (svw, svh, svi, svb, svmin, svmax), large (lvw, lvh, lvi, lvb, lvmin, lvmax), dynamic (dvw, dvh, dvi, dvb, dvmin, dvmax), and logical (vi, vb) units. These units are already implemented in Firefox and Safari, meaning that we now have interop across the three main browser engines for these units.

Read The large, small, and dynamic viewport units.

The contain-intrinsic-size shorthand CSS property is supported in Firefox 107, along with the longhand contain-intrinsic-width, contain-intrinsic-height and logical properties contain-intrinsic-block-size and contain-intrinsic-inline-size.

These are applied to specify the size of a UI element that is subject to size containment. This allows a user agent to determine the size of an element without needing to render its child elements. They are useful when an element is subject to size containment.

Support for the CSS fragmentation avoid keyword

Chrome 108 includes support for the avoid value of the CSS fragmentation properties break-before, break-after, and break-inside when printing. This value tell the browser to avoid breaking before, after or inside the element it is applied to. For example, the following CSS avoids a figure being broken at a page break.

figure {
    break-inside: avoid;
}

This addition is due to the inclusion of print support using LayoutNG, this brings a modern, lessy buggy experience. Learn more about LayoutNG.

Federated Credential Management API

The Federated Credential Management API (FedCM) provides an abstraction for federated identity flows on the web. It exposes a browser mediated dialog that allows users to choose accounts from identify providers to login to websites. FedCM is shipping in Chrome 108, find out more about it in the FedCM announcement blog post.

Beta browser releases

Beta browser versions give you a preview of things that will be in the next stable version of the browser. It's a great time to test new features, or removals, that could impact your site before the world gets that release. Due to where release dates fall, the only new beta this month is Firefox 108, with Safari 16.2 beta still ongoing.

Firefox 108 supports height and width attributes for the <source> element, when it is a child of a <picture> element. These attributes accept the height or width of the image, in pixels, as an integer without a unit.

Implementation of container queries is underway in Firefox. Behind the layout.css.container-queries.enabled flag in Firefox 108 beta, you will find the container query length units—cqw, cqh, cqi, cqb, cqmin, cqmax. These are units of length relative to the size of a query container.

Part of the New to the web series