![Rachel Andrew](https://web.dev/images/authors/rachelandrew.jpg) Rachel Andrew Technical Writer [GitHub](https://github.com/rachelandrew) [LinkedIn](https://www.linkedin.com/in/rachelandrew) [Mastodon](https://front-end.social/@rachelandrew) [Bluesky](https://bsky.app/profile/rachelandrew.bsky.social) [Homepage](https://rachelandrew.co.uk)

<br />


Published: October 16, 2024

<br />

Unless otherwise noted, the following changes apply to the newest Chrome beta
channel release for Android, ChromeOS, Linux, macOS, and Windows. Learn more
about the features listed here through the provided links or from the list on
[ChromeStatus.com](https://chromestatus.com).
Chrome 131 is beta as of October 16, 2024. You can download
the latest on [Google.com](https://www.google.com/chrome/beta/) for desktop or
on Google Play Store on Android.

## CSS

This release adds eight new CSS features.

### CSS Anchor Positioning: anchor-scope

The `anchor-scope` property allows limiting the visibility of anchor names to a
given subtree.

### ​CSS `font-variant-emoji`

The `font-variant-emoji` CSS property provides a way to control between
colored (emoji-style) and monochromatic (text-style) emoji glyphs. This can be
also done by adding an emoji Variation Selector, specifically U+FE0E for text
and U+FE0F for emoji, after each emoji codepoint.

### CSS highlight inheritance

With CSS highlight inheritance, the CSS highlight pseudo-classes, such as
`::selection` and `::highlight`, inherit their properties through the pseudo
highlight chain, rather than the element chain. The result is a more intuitive
model for inheritance of properties in highlights.

To learn more, read the blog post
[Inheritance changes for CSS selection styling](https://developer.chrome.com/blog/selection-styling.md.txt)
written by Stephen Chenney from Igalia.

### Improvements to styling structure of `<details>` and `<summary>` elements

Support more CSS styling for the structure of `<details>` and `<summary>`
elements to allow these elements to be used in more cases where disclosure
widgets or accordion widgets are built on the web. In particular, this change
removes restrictions that prevented setting the display property on these
elements, and adds a `::details-content` pseudo-element to style the container
for the part that expands and collapses.

### `@page` margin boxes

Add support for page margin boxes, when printing a web document, or exporting it
as PDF.

The `@page` margin boxes let you define the contents in the margin area of
a page, for example to provide custom headers and footers, rather than using
the built-in headers and footers generated by the browser.

A margin box is defined using an at-rule inside a CSS `@page` rule. The
appearance and the contents of a margin box are specified with CSS properties
inside the at-rule, including the `content` property. Counters are also
supported, for page numbering. The specification defines two special counter
names: `page` for the current page number and `pages` for the total number of
pages.

### @property support `<string>` syntax

Support for `<string>` syntax component name for registered custom properties.

### Support currentcolor in relative color syntax

Allow relative colors in CSS (using the `from` keyword) to use `currentcolor` as
a base. This lets you set complementary colors, based on an
element's text color, for that element's borders, shadows, or backgrounds.

This feature also includes use cases where color functions are nested with a
dependency on currentcolor, for example
`color-mix(in srgb, rgb(from currentcolor r g b), white))` or
`rgb(from rgb(from currentcolor 1 g b) b g r)`.

### Support external SVG resources for `clip-path`, `fill`, `stroke`, and `marker-*` properties

This feature adds support for external references for clip paths, markers, and
paint servers (for the 'fill' and 'stroke' properties). For example,
`clip-path: url("resources.svg#myPath")`.

## Web APIs

### Direct Sockets API

Allows Isolated Web Apps to establish direct transmission control protocol (TCP)
and user datagram protocol (UDP) communications with network devices and systems
as well as listen to and accept incoming connections.

### Exempt Speculation-Rules header from CSP restrictions

Updates the integration between speculation rules and CSP so that CSP only
applies to `<script type=speculationrules>`, and not to the `Speculation-Rules`
header. CSP's script policies are meant to protect against injection of scripts
into HTML, and the CSP threat model doesn't relate to HTTP headers. This allows
easier deployment of speculation rules from CDNs and other edge servers.

### FedCM as a trust signal for the Storage Access API

Reconciles the FedCM and Storage Access APIs by making a prior FedCM grant a
valid reason to automatically approve a storage access request.

When a user grants permission to use their identity with a third-party identity
provider (IdP) on a relying party (RP), many IdPs require third-party cookies to
function correctly and securely. This proposal aims to satisfy that requirement
in a private and secure manner by updating the Storage Access API (SAA)
permission checks to not only accept the permission grant that is given by a
storage access prompt, but also the permission grant that is given by a FedCM
prompt.

A key property of this mechanism is limiting the grant to cases explicitly
allowed by the RP with the FedCM permissions policy, enforcing a per-frame
control for the RP and preventing passive surveillance by the IdP beyond the
capabilities that FedCM already grants.

### COOP value `noopener-allow-popups`

Some origins can contain different applications with different levels of
security requirements. In those cases, it can be beneficial to prevent scripts
running in one application from being able to open and script pages of another
same-origin application.

In such cases, it can be beneficial for a document to ensure its opener cannot
script it, even if the opener document is a same-origin one. The
`noopener-allow-popups` Cross-Origin-Opener-Policy value lets documents
define that behavior.

### Private Aggregation API: increase contribution limit to 100 for Protected Audience callers

Enables Protected Audience script runners to make up to 100 contributions per
Private Aggregation report, compared to the current limit of 20.

Private Aggregation limits the number of histogram contributions that can be
embedded in a single aggregatable report, dropping any additional contributions.
Shared Storage callers can work around the limit by invoking another Shared
Storage operation. However, Protected Audience callers have no persistent
storage, so they lose their excess contributions at the end of their auction.
Note that this change is privacy neutral as the API's contributions are still
limited by the same privacy budget.

Due to padding, each Protected Audience report will have a larger payload, even
if it did not need the larger contribution limit. We expect that these larger
reports will increase the cost of operating the Aggregation Service.

### Select parser relaxation

This change makes the HTML parser allow additional tags in `<select>` besides
`<option>`, `<optgroup>`, and `<hr>`.

This change is in support of the customizable `<select>` feature but is being
shipped first because it can be done separately and has some compat risk which
the Chrome team would like to get feedback on.

### WebGPU: Clip distances

Adds the optional GPU feature `clip-distances` that allows setting user-defined
clip distances in vertex shader outputs. This technique is particularly useful
for the applications that need to clip all vertices in a scene that are beyond a
user-defined plane, such as many CAD applications.

### WebGPU: GPUCanvasContext `getConfiguration()`

Once `GPUCanvasContext configure()` has been called with a configuration
dictionary, you can use the `GPUCanvasContext getConfiguration()` method to
check the canvas context configuration. It includes GPU `device`, `format`, `usage`,
`viewFormats`, `colorSpace`, `toneMapping`, and `alphaMode` members.
[As discussed in issue 4828](https://github.com/gpuweb/gpuweb/issues/4828),
web apps can use it
to detect whether HDR canvas is supported in WebGPU.

### WebHID on dedicated workers

Enables WebHID inside dedicated worker contexts. This lets you perform heavy I/O
and processing of data from a HID device on a separate thread, helping to reduce
the performance impact on the main thread.

### WebRTC `RTCRtpEncodingParameters.scaleResolutionDownTo`

An API that configures WebRTC encoders to scale input frames if they are greater
than the specified `maxWidth` and `maxHeight`. This API is similar to
`scaleResolutionDownBy` except that resolution constraints are expressed in
absolute terms (for example, 640x360) as opposed to relative terms (for example,
scale down by 2), avoiding race conditions related to changing input frame size
on the fly.

## New origin trials

In Chrome 131 you can opt into the following new
[origin trials](https://developer.chrome.com/docs/web-platform/origin-trials.md.txt).

### Playout statistics for WebAudio

The `AudioContext.playoutStats` feature allows an application to measure the
quality and latency of audio playout using WebAudio.

### Summarizer API

A JavaScript API for producing summaries of input text, backed by an AI language
model.

## Deprecations and removals

This version of Chrome introduces the following deprecations and removals.
Visit ChromeStatus.com for lists of planned deprecations, current deprecations
and previous removals.

This release of Chrome removes three features.

### Remove the CSS Anchor Positioning property `inset-area`

With the CSS Working Group resolution on renaming the `inset-area` property to
`position-area`, this removal cleans up the implementation in Chromium for a
standards compliant feature.

### Remove the ability to disable `BeforeunloadEventCancelByPreventDefault`

Feature `BeforeunloadEventCancelByPreventDefault` was shipped in Chrome 117, but
there is an enterprise policy that allows this flag to be force-disabled. The
enterprise policy will be removed in Chrome 131.

### Remove non-standard GPUAdapter `requestAdapterInfo()` method

The WebGPU Working Group decided it was impractical for `requestAdapterInfo()`
to trigger a permission prompt so they've removed that option and replaced it
with the GPUAdapter `info` attribute so that web developers can get the same
`GPUAdapterInfo` value synchronously.