New to the web platform in March

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

Rachel Andrew

Stable browser releases

In March 2024 Firefox 124, Safari 17.4, and Chrome 123 became stable. This post looks at the new features added to the web platform.

Adapt color schemes with light-dark()

The light-dark() color function landed in Chrome 123 and makes it easier to adapt color schemes to user preference. In the following example color-scheme is set to light dark on root. The custom properties use the light-dark() color function to set colors that will be switched between depending on the user's light or dark mode preference.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

Find more examples and details in CSS color-scheme-dependent colors with light-dark()

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 120.
  • Safari: 17.5.

Source

Better control of inputs with field-sizing

Also in Chrome 123, the field-sizing property enables automatically-growing text input fields.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: not supported.

Source

Kerning for CJK punctuation with text-spacing-trim

In Chrome 123, the text-spacing-trim property applies kerning to Chinese, Japanese, and Korean (CJK) punctuation characters to adjust excessive spacing. Read more in Introducing four new international features for CSS.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: not supported.

Source

The @scope CSS at-rule

Safari 17.4 includes @scope letting you select elements in specific DOM subtrees, targeting elements precisely without writing overly-specific selectors that are hard to override, and without coupling your selectors too tightly to the DOM structure.

Learn more in Limit the reach of your selectors with the CSS @scope at-rule

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

Picture-in-picture improvements

Chrome 123 includes two features to improve picture-in-picture experiences. The first is the CSS picture-in-picture display mode. This lets you write specific CSS rules that are only applied when (part of the) the web app is shown in picture-in-picture mode.

The second feature lets you use opener.focus from a document picture-in-picture window to bring system-level focus to the tab that owns the document picture-in-picture window.

This lets you bring the original tab back to the foreground when necessary. For example, when the user needs to access a UI experience that doesn't fit in the smaller picture-in-picture window.

Support for align-content in block and table layout

Chrome 123 and Safari 17.4 include support for align-content in block and table layout. Read about the change to align-content support.

Service Worker Static Routing API

From Chrome 123, the Service Worker Static Routing API is available. This API lets you declaratively state how certain resource paths should be fetched, meaning that the browser does not need to run a service worker only to fetch responses from a cache, or directly from the network.

Find out more in Use the Service Worker Static Routing API to bypass the service worker for specific paths.

Long Animation Frames API

Chrome 123 also includes The Long Animation Frames API, which is an update to the Long Tasks API to provide a better understanding of slow user interface (UI) updates. This can be useful to identify slow animation frames which are likely to affect the Interaction to Next Paint (INP) Core Web Vital metric which measures responsiveness, or to identify other UI jank which affects smoothness.

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: not supported.
  • Safari: not supported.

Source

The content-visibility property

Firefox 124 includes support for the CSS content-visibility property. This property controls whether an element renders its content at all, allowing browsers to omit rendering the content until it is needed.

Browser Support

  • Chrome: 85.
  • Edge: 85.
  • Firefox: 125.
  • Safari: 18.

Source

Additions to ArrayBuffer and array grouping

In Safari 17.4 JavaScript gets some new features with support for the detached property and transfer() and transferToFixedLength() methods of ArrayBuffer.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 122.
  • Safari: 17.4.

Source

Safari 17.4 also includes the array grouping methods Object.groupBy and Map.groupBy. To learn more about array grouping, read JavaScript is getting array grouping methods.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 119.
  • Safari: 17.4.

Source

These features are now interoperable and therefore join Baseline Newly Available.

setHTMLUnsafe and parseHTMLUnsafe

The setHTMLUnsafe and parseHTMLUnsafe methods shipping in Safari 17.4 allow the Declarative Shadow DOM to be used from JavaScript. These methods also offer an easier way to imperatively parse HTML into DOM, as compared to innerHTML or DOMParser.

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 125 and Chrome 124. 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 125 is shaping up to be an exciting release. It includes align-content on blocks, making this feature interoperable. Also included, and therefore becoming part of Baseline Newly Available, is the Popover API. The transition-behavior property will also be supported. Popover and transition-behavior are part of Interop 2024.

Chrome 124 includes the setHTMLUnsafe and parseHTMLUnsafe methods to allow the Declarative Shadow DOM to be used from JavaScript, making these features interoperable. Also included is the WebSocketStream API, and the writingsuggestions attribute.