What shipped in stable browsers this month

Firefox 106, Chrome 107, and Safari 16.1 all reached stable in October. Each brings a handful of platform features worth knowing about.

Grid track animations land in Chrome

Chrome can now interpolate grid-template-columns and grid-template-rows values. That means grid layouts can transition smoothly between two states rather than snapping abruptly at the animation’s midpoint. The change came from contributors at Microsoft.

Hover over the avatars to see the animation. This example is from the article CSS animated grid layouts, where you can find out more.

New screen-sharing controls in getDisplayMedia()

Chrome’s additions to getDisplayMedia() are aimed at preventing the accidental oversharing that can happen during screen capture. Four new options are available:

  • displaySurface lets the app signal a preference for a specific surface type: tabs, windows, or screens.
  • surfaceSwitching controls whether the user can dynamically swap between shared tabs.
  • selfBrowserSurface can prevent the user from choosing the current tab, avoiding the “hall of mirrors” effect.
  • systemAudio narrows the audio capture options to the ones relevant to the sharing context.

Safari 16.1 also supports getDisplayMedia, adding the ability to capture a specific Safari window.

Feature queries for font tech in Firefox

Firefox now supports font-tech() and font-format() inside @supports. The example below checks for COLRv1 font support:

@supports font-tech(color-COLRv1) {

}

Safari 16.1: text fragments, AVIF animation, and Web Push

Scroll to text fragment navigation is now supported in Safari 16.1, letting URLs point directly at a highlighted passage of text.

Still AVIF images came with Safari 16; this release adds animated AVIF support on macOS Ventura, iOS 16, and iPadOS 16.

Safari 16.1 also brings Web Push to macOS Ventura via the Push API and Notifications API. With this release, Web Push is available across all three major browser engines.

What’s upcoming in betas

Chrome 108, Firefox 107, and Safari 16.2 entered beta this month, giving developers a preview of what’s next.

Chrome 108 adds the avoid value for the CSS fragmentation properties break-before, break-after, and break-inside when printing. This instructs the browser not to split an element across a page break, which is handy for keeping things like figures intact:

figure {
    break-inside: avoid;
}

Two behavioral changes are also rolling out in Chrome. Overflow on replaced elements is changing, which could cause visual differences in some cases. Separately, Chrome on Android will resize the layout viewport differently when the on-screen keyboard appears; both changes are worth reviewing before they hit stable.

New viewport units

Chrome 108 adds the CSS viewport units based on small, large, and dynamic viewport sizes: svw, svh, svi, svb, svmin, svmax, lvw, lvh, lvi, lvb, lvmin, lvmax, and the dynamic equivalents dvw, dvh, dvi, dvb, dvmin, dvmax. The logical units vi and vb are included as well. Firefox and Safari already support these.

Font and sizing updates

Firefox 107 turns on COLRv1 font support, matching Chrome. Chrome 108, meanwhile, adds the font-tech() and font-format() functions to @supports feature queries.

Firefox picks up contain-intrinsic-size, making it the second engine to support the property alongside Chrome. Safari 16.2 beta brings a set of CSS fixes covering sizing and scroll snap.