# Chrome 131

**Stable release date:** November 12th, 2024


Unless otherwise noted, the following changes apply to Chrome 131 stable
channel release for Android, ChromeOS, Linux, macOS, and Windows.
| Want just the highlights? Check out [New in Chrome 131](https://developer.chrome.com/blog/new-in-chrome-131).

<br />

## CSS

### CSS Anchor Positioning: anchor-scope

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


[Tracking bug #40281992](https://issues.chromium.org/issues/40281992) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5094192052436992) \| [Spec](https://drafts.csswg.org/css-anchor-position-1/#anchor-scope)

<br />

### 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.


[MDN font-variant-emoji](https://developer.mozilla.org/docs/Web/CSS/font-variant-emoji) \| [ChromeStatus.com entry](https://chromestatus.com/feature/6566092561973248)

<br />

### CSS highlight inheritance

Changes to CSS highlight inheritance were expected to ship in Chrome 131 but were removed due to compatibility reasons.


[Inheritance changes for CSS selection styling](https://developer.chrome.com/blog/selection-styling) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5090853643354112) \| [Spec](https://drafts.csswg.org/css-pseudo-4/#highlight-cascade)

<br />

### 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.


[Tracking bug #1469418](https://issues.chromium.org/issues/1469418) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5112013093339136) \| [Spec](https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements)

<br />

### `@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.


[Add content to the margins of web pages when printed using CSS](https://developer.chrome.com/blog/print-margins) \| [Tracking bug #320370](https://issues.chromium.org/issues/320370) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5195769732923392) \| [Spec](https://drafts.csswg.org/css-page-3/#margin-boxes)

<br />

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

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


[Tracking bug #357751736](https://issues.chromium.org/issues/357751736) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5083057057693696) \| [Spec](https://drafts.css-houdini.org/css-properties-values-api-1/#supported-names)

<br />

### Select parser relaxation

This makes the HTML parser allow tags in
`<select>` in addition to `<option>`, `<optgroup>`, and `<hr>`.

This change is in support of the
[customizable `<select>` feature](https://open-ui.org/components/customizableselect/).


[Tracking bug #335456114](https://issues.chromium.org/issues/335456114) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5145948356083712)

<br />

### 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)`.


[Tracking bug #325309578](https://issues.chromium.org/issues/325309578) \| [ChromeStatus.com entry](https://chromestatus.com/feature/4755025804132352) \| [Spec](https://www.w3.org/TR/css-color-5/#resolving-rcs)

<br />

### 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")`.


[Tracking bug #40134477](https://issues.chromium.org/issues/40134477) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5198862739046400) \| [Spec](https://svgwg.org/svg2-draft/linking.html#URLReference)

<br />

## 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.


[Tracking bug #40604287](https://issues.chromium.org/issues/40604287) \| [ChromeStatus.com entry](https://chromestatus.com/feature/6398297361088512) \| [Spec](https://wicg.github.io/direct-sockets)

<br />

### 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.


[ChromeStatus.com entry](https://chromestatus.com/feature/5123809745829888) \| [Spec](https://wicg.github.io/nav-speculation/speculation-rules.html#security-xss)

<br />

### 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.


[Tracking bug #330574529](https://issues.chromium.org/issues/330574529) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5116478702747648)

<br />

### noopener-allow-popups COOP value

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.


[Tracking bug #344963946](https://issues.chromium.org/issues/344963946) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5163293877731328)

<br />

### 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.


[ChromeStatus.com entry](https://chromestatus.com/feature/5077348995825664)

<br />

### 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.


[ChromeStatus.com entry](https://chromestatus.com/feature/5206373705711616) \| [Spec](https://w3c.github.io/webrtc-extensions/#dom-rtcrtpencodingparameters-scaleresolutiondownto)

<br />

### WebXr hand input module Level 1

Exposes hand joint data on `XrInputSources` for use during a WebXr session.
This allows developers to have more fine grained interactions during WebXr sessions.


[Tracking bug #359418633](https://issues.chromium.org/issues/359418633) \| [ChromeStatus.com entry](https://chromestatus.com/feature/6290425179275264) \| [Spec](https://immersive-web.github.io/webxr-hand-input)

<br />

## Rendering and graphics

### 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.


[Tracking bug #358408571](https://issues.chromium.org/issues/358408571) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5141929256550400) \| [Spec](https://gpuweb.github.io/gpuweb/#dom-gpufeaturename-clip-distances)

<br />

### 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.


[Tracking bug #370109829](https://issues.chromium.org/issues/370109829) \| [ChromeStatus.com entry](https://chromestatus.com/feature/6195110870777856) \| [Spec](https://gpuweb.github.io/gpuweb/#dom-gpucanvascontext-getconfiguration)

<br />

## Privacy

### Attribution-Reporting API: Remove aggregation key identifier size limit for trigger registrations

Previously the aggregation key identifier length limit was checked in both
source and trigger registrations. As this limit is not for privacy and it's not persisted in the storage,
it's being removed in trigger registrations.


[ChromeStatus.com entry](https://chromestatus.com/feature/5131578140000256)

<br />

### 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.


[Tracking bug #360160864](https://issues.chromium.org/issues/360160864) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5114676393017344)

<br />

## Origin trials

### Playout Statistics API for WebAudio

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


[Origin Trial](https://developer.chrome.com/origintrials#/view_trial/2409988750596636673) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5172818344148992) \| [Spec](https://wicg.github.io/web_audio_playout)

<br />

### `ServiceWorkerStaticRouterTimingInfo`

Adds timing information for ServiceWorker Static routing API,
exposed in navigation timing API and resource timing API for developer use.

Service Worker provides timing information to mark certain points in time.
We add two Static routing API-relevant timing information:
RouterEvaluationStart, time to start matching a request with registered
router rules, and CacheLookupStart, time to start looking up the cache storage
if the source is "cache". In addition, we also add two router source information,
the matched router source and the final router source.


[Origin Trial](https://developer.chrome.com/origintrials#/view_trial/1689412810217357313) \| [ChromeStatus.com entry](https://chromestatus.com/feature/6309742380318720)

<br />

### Summarization API

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


[Origin Trial](https://developer.chrome.com/origintrials#/view_trial/1923599990840623105) \| [Summarization API documentation](https://developer.chrome.com/docs/ai/summarizer-api) \| [Tracking bug #351744634](https://issues.chromium.org/issues/351744634) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5193953788559360)

<br />

### Translator API

A JavaScript API to provide language translation capabilities to web pages.


[Origin Trial](https://developer.chrome.com/origintrials#/view_trial/4445615782168100865) \| [Translator API documentation](https://developer.chrome.com/docs/ai/translator-api) \| [Tracking bug #322229993](https://issues.chromium.org/issues/322229993) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5172811302961152)

<br />

## Deprecations and removals

### 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.


[Tracking bug #352360007](https://issues.chromium.org/issues/352360007) \| [ChromeStatus.com entry](https://chromestatus.com/feature/5944933945704448)

<br />

### 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.


[ChromeStatus.com entry](https://chromestatus.com/feature/5129927993851904)

<br />

### 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.


[ChromeStatus.com entry](https://chromestatus.com/feature/5140787340509184) \| [Spec](https://gpuweb.github.io/gpuweb/#dom-gpuadapter-info)

<br />

<br />

## Further reading

Looking for more? Check out these additional resources.

- [What's new in Chrome 131](https://developer.chrome.com/blog/new-in-chrome-131)
- [What's new in Chrome DevTools 131](https://developer.chrome.com/blog/new-in-devtools-131)
- [ChromeStatus.com updates for Chrome 131](https://chromestatus.com/features#milestone%3D131)
- [Chrome release calendar](https://chromiumdash.appspot.com/schedule)
- [Upcoming deprecations](https://chromestatus.com/features#browsers.chrome.status%3A%22Deprecated%22)
- [Upcoming removals](https://chromestatus.com/features#browsers.chrome.status%3A%22Removed%22)

## Download Google Chrome


Download Chrome for
[Android](https://play.google.com/store/apps/details?id=com.android.chrome),
[Desktop](https://www.google.com/chrome/), or
[iOS](https://apps.apple.com/us/app/google-chrome/id535886823).

<br />