New to the web platform in March

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

Mar 31, 2023

Rachel Andrew

TwitterGitHubGlitchHomepage

Stable browser releases #

In March 2023, Firefox 111, Chrome 111, and Safari 16.4 became stable. Let's take a look at what this means for the web platform.

Global HTML attributes #

Firefox 111 adds support for a couple of useful global HTML attributes. The autocapitalize attribute controls whether text may be automatically capitalized when the user is typing on a virtual keyboard.

The translate attribute indicates whether an element should be translated when a page is localized.

Origin Private File System (OPFS) #

Firefox adds support for the Origin Private File System (OPFS) when using the File System Access API. Learn more about the OPFS.

The View Transitions API #

Chrome 111 adds the View Transitions API, making the creation of polished transitions in Single-Page Apps (SPAs) simpler by snapshotting views and allowing the DOM to change without any overlap between states.

Find out more in the launch post SPA view transitions land in Chrome 111.

New CSS color spaces and functions #

Also included in Chrome 111 are a whole new set of ways to use color on the web. Chrome now supports color spaces that access colors outside of the RGB gamut, along with the color() and color-mix() functions. Learn more in our High definition CSS color guide and blog post on color-mix().

The Chrome release also includes new DevTools to help you work with this new color functionality.

More control over :nth-child() selections #

Chrome 111 adds the ability to pass a selector list into :nth-child() and nth-last-child(). Learn more about this, and see examples in the post More control over :nth-child() selections with the of S syntax.

Support for previous and next slide in the Media Session API #

Finally in this list of Chrome 111 additions are the Presenting slides actions for the media session API—"previousslide" and "nextslide".

Pseudo-class support in Safari #

Safari 16.4 is an amazing release for the web platform. This article won't cover all of the additions, so check out the full list of features in the Safari 16.4 release notes.

There's a bunch of additional CSS pseudo-classes with support in this release: :user-invalid, :user-valid, :dir(), :modal, and :fullscreen.

New range syntax for media queries #

This Safari release makes the far more elegant and useful range syntax for media queries interoperable across all three engines. See examples of this syntax in this post, published when the syntax shipped in Chrome.

CSS Properties and Values #

Safari 16.4 adds support for @property, enabling CSS custom property registration directly in a stylesheet. Learn more about this in @property: giving superpowers to CSS variables.

CSS API support #

The great additions for CSS keep coming, with support for the CSS Typed OM. This API exposes CSS values as typed JavaScript objects rather than strings. It makes working with CSS from JavaScript easier, and is more performant than existing methods.

There is also support for constructable stylesheets with CSSStyleSheet(). This enables the sharing of stylesheets between a document and its shadow DOM subtrees. With this version of Safari, constructable stylesheets are now supported in all three engines.

Web Push and the Badging API #

Safari now suports Web Push, along with the Badging API, which is great news for app developers. In particular, this version means that push notifications are supported in all major engines.

Import maps #

Another addition that brings a feature to interoperable status is the addition of JavaScript Import maps, making importing ES modules much easier.

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 are Firefox 112, Safari 16.5, and Chrome 112. These releases bring many great features to the platform. Check out the release notes for all of the details, here are just a few highlights.

Firefox 112 adds support for the inert attribute, which will make this useful attribute available across all engines. You can learn more about inert in Introducing inert. Firefox will also enable support for the linear() easing function.

Chrome 112 and Safari 16.5 both add support for CSS Nesting, a feature that is highly anticipated by many developers.

Chrome 112 also includes support for animation-composition. Learn how this property works in Specify how multiple animation effects should composite with animation-composition.

If you use Chrome's Headless mode, for example with Puppeteer, then 112 brings an all new Headless mode. Learn about it in Chrome's Headless mode gets an upgrade.

Photo by Tali Khrab.