New to the web platform in September
Discover some of the interesting features that landed in stable and beta web browsers during September 2022.
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.
- Chrome 105, Supported 105
- Firefox 110, Supported 110
- Edge 105, Supported 105
- Safari 16, Supported 16
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.
- Chrome 114, Behind a flag
- Firefox 71, Supported 71
- Edge 114, Behind a flag
- Safari 16, Supported 16
Also, in Safari, for grid layout is the ability to animate grid tracks.
- Chrome 107, Supported 107
- Firefox 66, Supported 66
- Edge 107, Supported 107
- Safari 16, Supported 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.
- Chrome 71, Supported 71
- Firefox 105, Supported 105
- Edge 79, Supported 79
- Safari 14.1, Supported 14.1
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.
Photo by Alexandr Podvalny.