New to the web platform in November
Discover some of the interesting features that landed in stable and beta web browsers during November 2022.
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 (
svmax), large (
lvmax), dynamic (
dvmax), and logical (
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.
- Chrome 108, Supported 108
- Firefox 101, Supported 101
- Edge 108, Supported 108
- Safari 15.4, Supported 15.4
contain-intrinsic-size shorthand CSS property is supported in Firefox 107, along with the longhand
contain-intrinsic-height and logical properties
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.
- Chrome 83, Supported 83
- Firefox 107, Supported 107
- Edge 83, Supported 83
- Safari, Not supported
Support for the CSS fragmentation
avoid keyword #
Chrome 108 includes support for the
avoid value of the CSS fragmentation properties
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.
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
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—
cqmax. These are units of length relative to the size of a query container.
Photo by Matt Seymour.