New in Chrome 125

Here's what you need to know:

I'm Adriana Jara. Let's dive in and see what's new for developers in Chrome 125.

CSS Anchor Positioning.

Displaying an element anchored to another element lets you create UI patterns like using a popover as a tooltip and attaching it to the element that invokes it.

With CSS Anchor Positioning you can tether an absolutely positioned element to one or more elements on the page in a declarative way. It doesn't require JavaScript and works performantly when the anchors are scrollable.

The anchor positioning feature consists of a large number of CSS properties. A few of the key properties are as follows:

  • anchor-name: Sets up an element to be an anchor for other elements.
  • position-anchor: Describes the "default" anchor that an anchored element should use for anchor positioning.
  • The anchor() function: Refers to the position of the anchor element, in positioning the anchored element.
  • inset-area: A shorthand for positioning, for common relative positions.

Compute Pressure API.

The Compute Pressure API offers high-level states that represent the CPU load on the system.

When optimizing for a balanced use of computer power the API uses the right underlying hardware metrics to ensure that users can take advantage of all the processing power available as long as the system is not under unmanageable stress.

Intel led the design and implementation work for this API, which will let video conferencing apps dynamically balance features and performance.

Visit Compute Pressure API for samples and more information.

Storage Access API (SAA) extended to non-cookie storage.

The Storage Access API is a JavaScript API that was created as an alternative to cross site cookies, for embeds that depend on loading cross-site resources, to request access permission from the user, on an as-needed basis.

This version includes an extension to use the API beyond cookies. With the extension you can access unpartitioned cookies and non-cookie storage in a third-party context, for example for indexedDB and localstorage. The following code shows an example to request access to indexedDB.

// Request a new storage handle via rSA (this may prompt the user)
let handle = await document.requestStorageAccess({indexedDB : true});

// Open or create an indexedDB that is shared with the 1P context
let messageDB = handle.indexedDB.open("messages");

And more!

Of course there's plenty more.

Read the full release notes.

Further reading

This covers only some key highlights. Check the following links for additional changes in Chrome 125.

Subscribe

To stay up to date, subscribe to the Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video.

Yo soy Adriana Jara, and as soon as Chrome 126 is released, I'll be right here to tell you what's new in Chrome!