Experimental Chromium Web Platform Features

counter() and counters() in alt text of 'content' property is useful to provide more meaningful information to e.g. pseudo elements to improve their accessibility.

Introduce @container anchored(fallback) to style descendants of anchor positioned elements based on which of position-try-fallbacks is applied. Such queries can be used to e.g. style an anchored element's tether, its animations, etc. based on how the anchor and the anchored element are positioned relative to each other. Example: #anchored { position-try-options: flip-block; container-type: anchored; } @container anchored(fallback: flip-block) { #anchored { --arrow-rotation: 180deg; } }

When the fallback is not taken, var()/attr() functions evaluate without looking for cycles in that fallback.

Allow web developers to indicate that a fetch() request should be retried, to have a greater guarantee on it being reliably sent, even if network is flaky. This is especially important for keepalive fetches, where the request might outlive the document, which can no longer watch for its failure and do manual retry. We intend to only support this for keepalive fetches for now because of implementation simplicity, and also the fact that all the use cases would benefit from being keepalive first.

Propagate overscroll-behavior from the root instead of the body. The CSS working group resolved[0] on not propagating properties from the body to the viewport. Rather, properties of the viewport are to be propagated from the root element e.g. scroll-behavior[1], scroll-snap-type[2], scroll-padding[3]. As such, overscroll-behavior should be propagated from the root element. However, Chrome has had a longstanding issue of propagating overscroll-behavior from the body rather than the root, which deviates from the behavior of Safari(WebKit) and Firefox(Gecko). This feature intends to fix this by propagating overscroll-behavior from the root rather than the body. [0] https://github.com/w3c/csswg-drafts/issues/6079#issuecomment-816307011 [1] https://drafts.csswg.org/css-overflow/#:~:text=not%20propagated%20to%20the%20viewport [2] https://drafts.csswg.org/css-scroll-snap/#:~:text=not%20propagated%20from%20HTML%20body [3] https://drafts.csswg.org/css-scroll-snap/#:~:text=padding%20values%20are%20not%20propagated%20from%20HTML%20body

restrictOwnAudio is a captured display surfaces constrainable property. This constrainable property changes the behavior of system audio in a captured display surface. The restrictOwnAudio constraint will only have an effect if the captured display surface inherently includes system audio; otherwise, it will have no impact. By default, when system audio is captured, it includes all audio played out by the system on audio output devices. When restrictOwnAudio is enabled, the captured system audio will be filtered to exclude audio originating from the document that performed getDisplayMedia. The restrictOwnAudio constraint allows for cleaner screen recordings for some use cases. Without it, if the capturing web page itself is playing audio (e.g. a video embedded on the on the recording page), that audio would be included in the capture. This could lead to an undesirable echo or interfere with the intended audio sources from other tabs or applications. The restrictOwnAudio constrainable property is described in the specification. https://www.w3.org/TR/screen-capture/#dfn-restrictownaudio

The ScrollIntoViewOptions container option allows developers to perform a scrollIntoView only scrolling the nearest ancestor scroll container. For example, the following snippet only scrolls the scroll container of target to bring target into view, but will not scroll all of the scroll containers to the viewport: target.scrollIntoView({container: 'nearest'});

Adds an additional cryptographic signature over Secure Payment Confirmation assertions and credential creation. The corresponding private key is not synced across devices. This helps web developers meet requirements for device binding for payment transactions.

Adds an opt-in, lightly restricted subset of the WebGPU API capable of running older graphics APIs such as OpenGL and Direct3D11. By opting into this mode and obeying its constraints, developers can extend the reach of their WebGPU applications to many older devices that do not have the modern, explicit graphics APIs that core WebGPU requires. For simple applications, the only required change is to specify the "compatibility" featureLevel when calling requestAdapter. For more advanced applications, some modifications may be necessary to accommodate the mode's restrictions. Since Compatibility mode is a subset, the resulting applications are also valid WebGPU Core applications and will run even on user agents that do not support Compatibility mode.

An API designed for interacting with an AI language model using text, image, and audio inputs. It supports various use cases, from generating image captions and performing visual searches to transcribing audio, classifying sound events, generating text following specific instructions, and extracting information or insights from text. It supports structured outputs which ensure that responses adhere to a predefined format, typically expressed as a JSON schema, to enhance response conformance and facilitate seamless integration with downstream applications that require standardized output formats. This API is also exposed in Chrome Extensions. This feature entry tracks the exposure on the web. An enterprise policy (GenAILocalFoundationalModelSettings) is available to disable the underlying model downloading which would render this API unavailable.

Summarizer API is a JavaScript API for producing summaries of input text, backed by an AI language model. Browsers and operating systems are increasingly expected to gain access to a language model. By exposing this built-in model, we avoid every website needing to download their own multi-gigabyte language model, or send input text to third-party APIs. The summarizer API in particular exposes a high-level API for interfacing with a language model in order to summarize inputs for a variety of use cases (Github), in a way that does not depend on the specific language model in question. An enterprise policy (GenAILocalFoundationalModelSettings) is available to disable the underlying model downloading which would render this API unavailable.

This feature adds logic to ignore the letter-spacing setting for cursive scripts as specified by the web author, in line with the spec, to ensure that letter spacing does not disrupt word structure and aims to produce better user experience for users relying on cursive scripts. The spec suggests that the UA may apply letter spacing to cursive scripts by translating the total extra space into cursive elongation or compression. Otherwise, if the UA cannot expand text from a cursive script without breaking its cursive connections, it must not apply spacing between any pair of that script’s typographic letter units at all. Ignoring letter spacing altogether for cursive scripts is simpler and helps avoid performance issues as handling spacing for such scripts requires complex calculations to maintain cursive connections and account for script-specific factors like elongation glyphs, typefaces, and calligraphy preferences. With this feature, Chromium ensures that cursive scripts will be readable and properly spaced, even if the fonts don’t have advanced typographic features. The scripts that we are proposing to apply this to in Chromium are Arabic, Hanifi Rohingya, Mandaic, Mongolian, N’Ko, Phags Pa, and Syriac as these scripts are considered cursive as per spec.

A JavaScript API to provide language translation capabilities to web pages. Browsers are increasingly offering language translation to their users. Such translation capabilities can also be useful to web developers. This is especially the case when browser's built-in translation abilities cannot help. An enterprise policy (GenAILocalFoundationalModelSettings) is available to disable the underlying model downloading which would render this API unavailable.

Exposes several new mechanisms to customize the behavior of the depth sensing feature within a WebXR session, with the goal of improving the performance of the generation or consumption of the depth buffer. The key mechanisms exposed are: the ability to request the raw or smooth depth buffer, the ability to request that the runtime stop or resume providing the depth buffer, and the ability to expose a depth buffer that does not align with the user's view exactly, so that the user agent does not need to perform unnecessary re-projections every frame.

This is not a web-exposed change. The implementation of CanvasRenderingContext2D's measureText(), fillText(), and strokeText() has a drastic change. This might affect performance, so we'd like to run an origin trial so canvas-heavy applications can try out the new implementation.

A system for creating structured headings within a document. The `headingoffset=` attribute can be added to elements that influences the child `h1`-`h6` elements' heading levels, for example a `headingoffset=1` will mean all `h1` elements will have an effective heading level of 2, and so on. In addition the `:heading` pseudo class will select all headings (tags of `h1` to `h6`) and the `:heading(N)` pseudo class will select headings with an _effective_ level of `N`. This allows for documents with different heading structures (for example user generated content) to be combined to create a well defined heading structure without significantly altering the underlying documents.

Dialog elements can be closed through a variety of mechanisms, sometimes developers want to have the ability to prevent closure. To achieve this dialogs fire a cancel event. Originally this was only fired via a close request (e.g. ESC key press), recently a `requestClose()` JS function was added which also fires the cancel event. The 'request-close' command brings that new ability to the declarative invoker commands API.

Add support for the `column-wrap` and `column-height` CSS properties, from multicol Level 2. https://drafts.csswg.org/css-multicol-2/#cwr https://drafts.csswg.org/css-multicol-2/#ch This allows for vertical column layout, or even 2D column layout. Columns can have an explicit constrained height, apart from being derived from the content-box height of the multicol container, and wrap to a new row of columns when all columns have been filled for one row, rather than creating overflowing columns in the inline direction.

This feature adds setDefaultSinkId() to MediaDevices, which enables the top-level frame to change the default audio output device used by its subframes.

There are a range of error conditions that can be hit when using the Private Aggregation API. For example, the privacy budget could run out, preventing any further histogram contributions. This feature allows developers to register histogram contributions that should only be sent if a particular type of error occurs. This feature supports measuring the frequency of the error conditions and to split these measurements on relevant developer-specified dimensions (e.g. version of deployed code). As the errors themselves may be cross-site information, we cannot simply expose them to the page for users without third-party cookies. Instead, this feature reuses the existing aggregate, noised reporting pipelines through the Aggregation Service.

Exposes find-in-page search results to authors as a highlight pseudo-element, like selections and spelling errors. This allows authors to change the foreground and background colors or add text decorations, which can be especially useful if the UA defaults have insufficient contrast with the page colors or are otherwise unsuitable.

Correct the error type thrown during WebAuthn credential creation for 'payment' credentials. Due to a historic specification mismatch, creating a 'payment' credential in a cross-origin iframe without a user activation would throw a SecurityError instead of a NotAllowedError, which is what is thrown for non-payment credentials. This is a breaking change, albeit a niche one. Code that previously detected the type of error thrown (e.g., `e instanceof SecurityError`) would be affected. Code that just generally handles errors during credential creation (e.g. `catch (e)`) will continue to function correctly.

The <canvas> DOM element, like all DOM elements, accepts a `lang` attribute that is used to define language specific treatment for font selection (when fonts have locale specific glyphs). Browsers respect this attribute. However, when an OffscreenCanvas is created there is no way to set locale information, possibly resulting in a state where an offscreen canvas produces rendered results that differ from the canvas in which it's output is used. This feature adds a `lang` IDL attribute to CanvasTextDrawingStyles to give developers direct control over the language for the text drawing and metrics.

The Container Timing API enables monitoring when annotated sections of the DOM are displayed on screen and have finished their initial paint. A developer will have the ability to mark subsections of the DOM with the containertiming attribute (similar to elementtiming for the Element Timing API) and receive performance entries when that section has been painted for the first time. This API will allow developers to measure the timing of various components in their pages.

Enable styling corners, on top of the existing border-radius, by specifying the shape/curvature of the corner. This allows shapes like squircles, notches, scoops etc., and animating between them.

Custom Functions are similar to custom properties, but instead of returning a single, fixed value, they return values based on other custom properties, parameters, and conditionals.

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. This allows web authors to express complex conditional logic in a simple and concise way. Example: <style> div { color: var(--color); background-color: if(style(--color: white): black; else: white); } .dark { --color: black; } .light { --color: white; } </style> <div class="dark">dark</div> <div class="light">light</div>

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. This allows web authors to express complex conditional logic in a simple and concise way. Example: <style> div { color: var(--color); background-color: if(style(--color: white): black; else: white); } .dark { --color: black; } .light { --color: white; } </style> <div class="dark">dark</div> <div class="light">light</div>

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. This allows web authors to express complex conditional logic in a simple and concise way. Example: <style> div { color: var(--color); background-color: if(style(--color: white): black; else: white); } .dark { --color: black; } .light { --color: white; } </style> <div class="dark">dark</div> <div class="light">light</div>

Exposes a user's preferred font scale to CSS. Currently, it is not practical for a page to detect if the user has changed their preferred font size via the Operating System's preferences. This CSS environment variable will reflect the scale chosen by the user.

This feature adds on-device speech recognition support to the Web Speech API, allowing websites to ensure that neither audio nor transcribed speech are sent to a third-party service for processing. Websites can query the availability of on-device speech recognition for specific languages, prompt users to install the necessary resources for on-device speech recognition, and choose between on-device or cloud-based speech recognition as needed.

This feature enables websites to support contextual biasing for speech recognition by adding a recognition phrase list to the Web Speech API. Developers can provide a list of phrases as well as updating them to apply a bias to the speech recognition models in favor of those phrases. This helps improve accuracy and relevance for domain-specific and personalized speech recognition.

The SVGAElement interface in SVG 2.0 allows manipulation of <a> elements similar to HTML anchor elements. Supporting the rel and relList attributes enhances security and privacy for developers. This alignment with HTML anchor elements ensures consistency and ease of use across web technologies.

A mediation mode for navigator.credentials.get() that causes browser sign-in UI to be displayed to the user if there is a passkey or password for the site that is immediately known to the browser, or else rejects the promise with NotAllowedError if there is no such credential available. This allows the site to avoid showing a sign-in page if the browser can offer a choice of sign-in credentials that are likely to succeed, while still allowing a traditional sign-in page flow for cases where there are no such credentials.