Here's what you need to know:
- Anchoring elements is easier than ever with CSS Anchor Positioning.
- The Compute Pressure API helps to optimize the available computer power.
- Storage Access API is expanded for more than cookie storage.
- And there's plenty more.
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.
There's an origin trial for the Device Posture API and the Viewport Segments Enumeration API. These APIs are designed to help developers target foldable devices.
The CSS stepped-value functions
round()
,mod()
, andrem()
have been added, making these features Baseline Newly AvailableThe Shared Storage API now supports running cross origin worklets without having to create an iframe.
Further reading
This covers only some key highlights. Check the following links for additional changes in Chrome 125.
- What's new in Chrome DevTools (125)
- ChromeStatus.com updates for Chrome 125
- Chromium source repository change list
- Chrome release calendar
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!