chrome 150
chrome 150 api reference
34 features tracked. Each card links to the gendn reference where MDN doesn't yet cover the API, or out to MDN where it does.
features (34)
Shipped (26)
-
AccentColor and AccentColorText system colors
The AccentColor and AccentColorText system colors can be used in CSS to access the system accent color specified on the user's device. This allows developers to apply native app like styling to their web content in conte...
-
Allow optional rounding parameter for `polygon()`
Allows an optional corner-rounding parameter in the polygon() CSS shape function. Developers can specify a length value to round polygon corners without manually computing bezier curves. Interactive demo: https://codepe...
-
Animatable zoom
The CSS zoom property is animatable and interpolates as a <number>. Developers can transition and animate zoom to smoothly scale elements and their layout, complementing existing transform-based scaling.
-
CSS URL request modifiers
CSS url() functions accept optional request modifiers after the quoted URL string: cross-origin(), integrity(), and referrer-policy(). These modifiers control the fetch behavior of the referenced resource directly from C...
-
CSS `text-fit` property
Scales the font size of text nodes to perfectly fit the width of its containing box. This property allows developers to ensure headlines or dynamic content fill the available horizontal space without manual font-size ca...
-
CSS background-clip: border-area
Implements the border-area value for the CSS background-clip property, as defined in CSS Backgrounds Level 4. background-clip: border-area clips an element's background to the area painted by its border strokes, taking b...
-
CSS image(<color>) function
The image() function allows an author to easily generate a solid-color image from any color. Its syntax is: image() = image( <color> )
-
CSS light-dark() with image values
Extends the CSS light-dark() function to accept image values (url(), image-set(), none) in author stylesheets, allowing image properties like background-image, list-style-image, border-image-source, cursor, and content t...
-
Clone into all descendant selectedcontent elements
Several small changes are being made to edge cases of the selectedcontent element: - When multiple selectedcontent elements are put in a select element at the same time, all of them will be kept up to date instead of onl...
-
Comma-separated Container Queries
Support multiple queries per @container rule. The @container rule applies if at least one of the queries matches. This makes it possible to have fallback queries for features which are not supported in all browsers, for...
-
Disable SVG filters on plugins and iFrames
Chrome 150 will prevent Scalable Vector Graphics (SVG) filters from being applied to embedded plugins (for example, PDFs) and cross-origin or restricted iFrames (for example, sandboxed ones). When a plugin or iFrame woul...
-
Expose unprintable areas via CSS
Printers usually have a small area at each of the four edges of a sheet of paper that they are not capable of marking reliably, usually due to the printer’s paper handling mechanism. The default page margins are expected...
-
Focusgroup
Gives authors the ability to declaratively give composite widgets arrow key navigation, a guaranteed tab stop, and last-focused memory, replacing hand-coded roving tabindex scripts. Example: <div focusgroup="toolbar wrap...
-
MediaStreamTrackProcessor frame counters
Adds discardedFrames and totalFrames attributes to the MediaStreamTrackProcessor interface. These counters allow web developers to monitor the health of their media processing pipelines by tracking the number of frames r...
-
Opaque origin for data: URLs
Chrome 150 updates how Dedicated and Shared Workers handle [data: URLs](https://datatracker.ietf.org/doc/html/rfc2397). Rather than automatically inheriting the security origin of the script or page that created them, th...
-
Out of order streaming
Use <template for> and processing instruction ranges (<?marker>, <?start>, and <?end> to update existing parts of the document without JS.
-
PWA origin migration
When a user installs a Progressive Web App (PWA), its identity and security context are tightly bound to its web origin, for example, `app.example.com`. This presents a significant challenge for developers who need to ch...
-
Parse processing instructions in HTML
Processing instructions (syntax: <?target data>) are an existing DOM construct, exposed in XML, that allows node objects that are not elements but can have some semantic meaning for the processing of a document. Process...
-
Popover=hint behavior changes
This change implements a revised and simplified stacking model for the popover=hint attribute and its interactions with popover=auto. Previously, the interactions between these two types of popovers could be complex in s...
-
Programmatic scroll promises
Provide a reliable signal for the completion status of a programmatic smooth-scroll. All scroll methods in Element and Window now return Promise objects that get resolved on scroll completion, and the resolved value indi...
-
Support 'path-length' as a CSS property.
This change introduces a new CSS property, 'path-length', which maps to the existing SVG 'pathLength' presentation attribute. It applies to SVG geometry elements that support 'pathLength' (including <path>, <circle>, <re...
-
Web Speech API: On-Device Recognition Quality
Extends the SpeechRecognition interface by adding a quality property to SpeechRecognitionOptions. This allows developers to specify the semantic capability required for on-device recognition (via processLocally: true). ...
-
WebGPU: Immediates
Functionality added to the WebGPU spec after its first shipment in a browser. Adds a new immediate address space in WGSL and a setImmediateData() method on render pass, compute pass, and render bundle encoders that allo...
-
flex-wrap:balance
flex-wrap:balance allows developers to distribute content between flex-lines so that it appears more balanced (similar to text-wrap:balance).
-
named-feature() function for CSS @supports
The named-feature() function allows CSS @supports rules to query for a small set of specific named features that are not possible to test for using other @supports mechanisms but which are considered highly valuable to t...
-
overscroll-behavior: chain
overscroll-behavior currently has 3 values: none, auto, and contain. These values affect 2 independent effects: scroll propagation and local border effect (e.g. overscroll stretch). none: no propagation, no local effect...
Origin Trial (2)
-
Email Verification Protocol
The EVP (email verification protocol) helps users create, access and recover accounts by providing cryptographic proof of ownership seamlessly rather than email OTPs manually.
-
Speculative load measurement
Expose measurement data regarding speculative loads (preloads, prefetches and prerenders) as part of a newly exposed `performance.getSpeculations()` method. That would enable developers to measure the efficacy of various...
Dev Trial (6)
-
Algorithm Updates in WebCrypto
Add post-quantum cryptography and a common symmetric AEAD to the set of cryptographic algorithms available in the Web Cryptography API. This will enable developers to have access browser-provided implementations of commo...
-
CSS4 text-decoration-skip-spaces
The text-decoration-skip-spaces CSS property controls whether text decoration lines (underlines, overlines, line-throughs, etc.) skip over whitespace characters. This allows authors to prevent decorations from being draw...
-
DeviceOrientation Events permission request API
Allows web developers to call Device{Motion,Orientation}Event.requestPermission() to ask the user agent for device orientation and motion data to be shared with the page. Those two static methods return a promise that re...
-
Sub apps for IWAs
Sub apps allow developers to create multiple apps under a single Isolated Web App ([IWA](https://chromeos.dev/en/web/isolated-web-apps)) installation. Each Sub app has its own distinct name, icons and OS integrations. ...
-
Update text selection on mouseup before dispatching click event
Currently Chromium applies the default action of a mouseup event (e.g. collapsing or committing a drag-selection in a text input) after the click event has already been dispatched. This violates developer expectations: a...
-
Web Speech API: Unspoken Punctuation
Adds the unspokenPunctuation boolean attribute to the SpeechRecognition interface of the Web Speech API. When enabled (true), this attribute directs the speech recognition engine to automatically infer and insert punctua...