Saturday, July 27, 2024

New to the web platform in April  |  Blog  |  web.dev

Web DevelopmentNew to the web platform in April  |  Blog  |  web.dev


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

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.

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.

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 .

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.

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.

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.

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.

Check out our other content

Check out other tags:

Most Popular Articles