New to the web platform in October

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

Oct 31, 2022

Rachel Andrew

TwitterGitHubGlitchHomepage

Stable browser releases #

In October, Firefox 106, Chrome 107, and Safari 16.1 became stable. Let's take a look at what this means for the web platform.

Animation of grid tracks #

Thanks to the work of our contributors at Microsoft, Chrome is now able to interpolate grid-template-columns and grid-template-rows values. This means that grid layouts can smoothly transition between states, instead of snapping at the halfway point of an animation or transition.

Additions to getDisplayMedia() #

Also in Chrome are some additions to getDisplayMedia() that aim to prevent accidental oversharing when screen sharing.

• The displaySurface option can indicate that the web app prefers to offer a specific display surface type (tabs, windows, or screens).
• The surfaceSwitching option indicates whether Chrome should allow the user to dynamically switch between shared tabs.
• The selfBrowserSurface option can be used to prevent the user from sharing the current tab. This avoids the "hall of mirrors" effect.
• The systemAudio option ensures Chrome only offers relevant audio-capture to the user.

Safari 16.1 also includes support for getDisplayMedia, adding support for capturing a specific Safari window.

Testing for support of font technology and features from CSS #

Firefox has added the font-tech() and font-format() functions to feature queries with @supports. The following example tests for support of COLRv1 fonts.

@supports font-tech(color-COLRv1) {

}

You can find more examples on MDN.

Scroll to text fragment #

Safari 16.1 includes support for scroll to text fragment which adds support for navigating to a URL with a particular text fragment specified.

AVIF support #

Safari 16 included support for still AVIF images, Safari 16.1 includes support for animated AVIF images on macOS Ventura, iOS 16, and iPadOS 16.

Web Push for Safari #

Safari 16.1 brings Web Push support to Safari on macOS Ventura. This uses the Push API and Notifications API, you can read more about this in the article Meet Web Push. Web Push landing in Safari means that it is now available across all three major engines.

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. New betas this month are Chrome 108, Firefox 107, and Safari 16.2.

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;
}

Chrome 108 starts to roll out a change to the way overflow behaves on replaced elements, which may cause visual changes in some circumstances. Read the article A change to overflow on replaced elements in CSS for more details and to see how to address any issues you see.

There's a change to how the Layout Viewport behaves in Chrome on Android when the on-screen keyboard is shown. Read Prepare for viewport resize behavior changes coming to Chrome on Android to learn more and find out how to prepare for this shipping to stable next month.

Also in Chrome 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.

Firefox 107 enables COLRv1 font support, joining Chrome in supporting this font technology. Also in fonts, Chrome 108 adds support for the font-tech() and font-format() functions to feature queries with @supports.

Firefox also adds contain-intrinsic-size support, joining Chrome to make two browsers with support for this feature.

Safari 16.2 Beta includes a bunch of CSS fixes including sizing and scroll snap.

Photo by ahmed zid.