New to the web platform in September

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

Rachel Andrew

Stable browser releases

In September, Firefox 105, Chrome 106, and Safari 16 became stable. This means that the September post is full of exciting things for the web platform.

Container queries

Safari 16 adds support for container queries, a feature which is now available in two engines. Safari also adds support for the new container query units.

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

Grid layout

Safari has landed support for the subgrid value of grid-template-columns and grid-template-rows. Using this value on a grid that is also a grid item means that instead of defining new tracks, the grid uses those that it spans of the parent.

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

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

Also, in Safari, for grid layout is the ability to animate grid tracks.

Browser Support

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

Safari has also added support for offset-path, overscroll-behavior, text-align-last, and the resolution media query.

Encoding API

Firefox 105 supports the TextDecoderStream and TextEncoderStream interfaces of the Encoding API.

Browser Support

  • Chrome: 71.
  • Edge: 79.
  • Firefox: 105.
  • Safari: 14.1.

Source

New Intl APIs

The Intl APIs help to display content in a localized format and Chrome 106 adds a slew of new number format functionality.

Like other Intl APIs, this shifts the burden to the system—so you don’t need to ship or maintain complex localization code to every user. The API knows where the currency symbol goes, how to format dates and times, or compile a list.

The showPicker() method

Safari 16 contains the showPicker() method, enabling a canonical way to show a browser picker for dates, time, color, and files is included. You can find out more about this in show a browser picker for date, time, color, and files.

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 107, Safari 16.1, and Firefox 106.

Chrome 107 includes the ability to animate grid tracks, that also shipped in Safari this month. Once this lands in Chrome it will be supported in all three major engines.

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 includes an additional fix to accessibility of display: contents, a fix to dynamic viewport height (dvh) units, and support for scroll to text fragments.

Part of the New to the web series