New to the web platform in April

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

Rachel Andrew

Stable browser releases

In April 2024 Firefox 125 and Chrome 124 became stable. This post looks at the new features added to the web platform.

Four new features land in Baseline

Firefox 125 added four new features to Baseline Newly Available. The Popover API, Intl.Segmenter, align-content for block layouts, and the content-box and stroke-box values for transform-box.

The Popover API

The Popover API lets you create many kinds of non-modal popups. These include tooltips, menus, custom toast popups, and many more. Popovers include lots of built-in functionality that you previously had to write JavaScript for. Find out more in Popover API lands in Baseline.

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Source

Intl.Segmenter

Intl.Segmenter enables local-sensitive text segmentation. For example, letting you split words in languages that don't separate words with spaces. See how it works in The Intl.Segmenter object is now part of Baseline.

Browser Support

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 125.
  • Safari: 14.1.

Source

align-content for block layouts

The align-content property is now supported in all major engines for block layout. This means that you can do block direction alignment without needing to also create a flex or grid layout on the parent. See an example in The align-content property for block layouts is now part of Baseline .

Browser Support

  • Chrome: 123.
  • Edge: 123.
  • Firefox: 125.
  • Safari: 17.4.

CSS transform-box

Finally, in Firefox 125 are the values of content-box and stroke-box for the transform-box property. The content-box value uses the content box and stroke-box the stroke bounding box containing an SVG's shape.

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: 125.
  • Safari: 13.1.

The WebSocketStream API

The WebSocketStream API integrates WHATWG Streams with the WebSocket API, and is available in Chrome 124. Learn more in WebSocketStream: integrating streams with the WebSocket API.

Browser Support

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

Source

setHTMLUnsafe and parseHTMLUnsafe

Chrome 124 also includes the setHTMLUnsafe and parseHTMLUnsafe methods the let you use the Declarative Shadow DOM from JavaScript. These methods also offer an easier way to imperatively parse HTML into DOM, as compared to innerHTML or DOMParser.

Browser Support

  • Chrome: 124.
  • Edge: 124.
  • Firefox: 123.
  • Safari: 17.4.

Source

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 126, Safari 17.5, and Chrome 125. 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.

Safari 17.5 includes the light-dark() color function, which will become Baseline Newly Available once 17.5 is stable.

Also coming to Baseline Newly Available are the CSS Stepped value functions. Chrome 125 includes round(), mod(), and rem().

Chrome 125 also includes the Compute Pressure API, and CSS anchor positioning.

Firefox 126 includes the Screen Wake Lock API, making yet another feature Baseline Newly Available.