New in Chrome 137

Rachel Andrew

Published: May 27, 2025

Chrome 137 is rolling out now, and this post shares some of the key features from the release. Read the full Chrome 137 release notes.

Highlights from this release:

Use reading-flow and reading-order to ensure a logical tab order through complex layouts. The CSS if() function provides a concise way to express conditional values. JavaScript Promise Integration (JSPI) lets WebAssembly applications integrate with JavaScript promises.

CSS `reading-flow` and `reading-order`

The reading-flow CSS property controls the order that elements in a flex, grid, or block layout are exposed to accessibility tools and how they get focused using linear sequential navigation methods. This solves a longstanding problem with grid and flex layouts, where the tab order can become disconnected to the order that the items are laid out.

It takes one keyword value, with a default of normal, which keeps the behavior of ordering elements in DOM order. To use it inside a flex container, set its value to either flex-visual or flex-flow. To use it inside a grid container, set its value to either grid-rows, grid-columns, or grid-order.

The reading-order CSS property lets you manually override the order of items within a reading flow container. To use this property inside a grid, flex, or block container, set the reading-flow value on the container to source-order and set the individual item's reading-order to an integer value.

To learn more read Use CSS reading-flow for logical sequential focus navigation.

CSS `if()` function

The CSS if() function provides a concise way to express conditional values. It accepts a series of condition-value pairs, delimited by semicolons. The function evaluates each condition sequentially and returns the value associated with the first true condition. If none of the conditions evaluate to true, the function returns an empty token stream.

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

<div class="dark">dark</div>
<div class="light">light</div>

WebAssembly JavaScript Promise Integration (JSPI)

JavaScript Promise Integration (JSPI) is an API that lets WebAssembly applications integrate with JavaScript promises.

It allows a WebAssembly program to act as the generator of a promise, and it allows the WebAssembly program to interact with promise-bearing APIs.

In particular, when an application uses JSPI to call a promise-bearing (JavaScript) API, the WebAssembly code is suspended; and the original caller to the WebAssembly program is given a promise that will be fulfilled when the WebAssembly program finally completes.

And more!

Of course there's plenty more:

As a continuation of Storage Partitioning, Chrome has implemented partitioning of Blob URL access by storage key.
Canvas floating point pixel formats are now implemented.
offset-path: shape() is supported so you can use responsive shapes to set the animation path.

New in Chrome 137

CSS reading-flow and reading-order

CSS if() function

WebAssembly JavaScript Promise Integration (JSPI)

And more!

Further reading

Subscribe

CSS `reading-flow` and `reading-order`

CSS `if()` function