New to the web platform in March

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

Rachel Andrew

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.

Browser Support

Source

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

Browser Support

Source

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.

Browser Support

Source

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().

Browser Support

Source

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

Note: You can also test the new color functions color(), lab(), lch(), oklab(), and oklch() in Firefox 111, currently behind a preference layout.css.more_color_4.enabled.

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.

Browser Support

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".

Browser Support

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.

Browser Support

Source

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.

Browser Support

Source

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.

Browser Support

Source

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.

Browser Support

Source

Web Push and the Badging API

Safari now supports 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.

Browser Support

Source

Import maps

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

Browser Support

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.

Part of the New to the web series