September's stable releases: a look at what landed

September brought stable releases of Firefox 105, Chrome 106, and Safari 16, making it a particularly busy month for new platform features. Here's a rundown of the most interesting additions now available to developers.

CSS container queries and subgrid arrive in Safari

Safari 16 adds support for container queries, meaning the feature is now available in two of the major browser engines. Along with the queries themselves, Safari also supports the new container query units that let you size elements relative to a container.

Rachel Andrew

Safari also landed the subgrid value for grid-template-columns and grid-template-rows. When you apply this value to a grid that is also a grid item, it takes its track definitions from the parent grid it spans, rather than declaring its own.

In Safari or Firefox the headers and footers in these cards will align, as their tracks are a subgrid of the parent.

Elsewhere in Safari's CSS support this month: the ability to animate grid tracks, plus support for offset-path, overscroll-behavior, text-align-last, and the resolution media query.

Encoding API support completes in Firefox

Firefox 105 brings support for the TextDecoderStream and TextEncoderStream interfaces of the Encoding API, filling out the final piece of this API across browsers.

New Intl APIs in Chrome

Chrome 106 adds a suite of new number format functionality to the Intl APIs. As with other members of this family, the goal is to shift localization work to the system: the API knows where to place currency symbols, how to format dates and times, and how to compile lists, so developers don't need to ship and maintain complex localization code.

A standard way to show pickers

Safari 16 includes the showPicker() method on HTMLInputElement. This provides a canonical way to programmatically show a browser's picker for dates, times, colors, and files.

A preview of the next browser versions

Beta releases for Chrome 107, Safari 16.1, and Firefox 106 give a look at what's coming next.

Chrome 107 includes the ability to animate grid tracks—the same feature that shipped in Safari this month. Once it lands, this capability will be available across all three major engine families.

Chrome is also adding options to getDisplayMedia() aimed at preventing accidental oversharing during screen captures:

  • The displaySurface option lets a web app indicate its preferred type of display surface to offer: tabs, windows, or screens.
  • The surfaceSwitching option controls whether Chrome allows the user to switch between shared tabs during a session.
  • The selfBrowserSurface option can prevent the user from sharing the current tab, which avoids the "hall of mirrors" feedback loop.
  • The systemAudio option lets Chrome know to only offer relevant audio capture choices to the user.

Safari 16.1 includes an accessibility fix for display: contents, a fix for dynamic viewport height (dvh) units, and adds support for scroll-to-text fragments.