Google Chrome 150

150
Added 14
  • Add AccentColor and AccentColorText system colors in CSS to access the system accent color specified on the user's device
  • Add optional corner-rounding parameter for polygon() CSS shape function
  • Make CSS zoom property animatable and interpolate as a number
  • Add CSS url() request modifiers cross-origin(), integrity(), and referrer-policy() to control fetch behavior of referenced resources
  • Add CSS text-fit property to scale font size of text nodes to fit the width of containing box
  • Implement border-area value for CSS background-clip property

Stable release date: June 30th, 2026 Unless otherwise noted, the following changes apply to Chrome 150 stable channel release for Android, ChromeOS, Linux, macOS, and Windows.

CSS and UI
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 lets developers apply native-app-like styling to their web content in contexts where users expect OS theme integration, such as an installed web application. Users must be in an installed web application on the initial profile to see the system accent color rendered. Tracking bug #40229450 | ChromeStatus.com entry | Spec

Allow optional rounding parameter for polygon()

Adds 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. Tracking bug #329302249 | ChromeStatus.com entry | Spec

Animatable zoom

The CSS zoom property is animatable and interpolates as a . Developers can transition and animate zoom to smoothly scale elements and their layout, complementing existing transform-based scaling. Tracking bug #393810951 | ChromeStatus.com entry

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 CSS, without requiring changes to HTML markup or JavaScript. For example, background-image: url("image.png" cross-origin(anonymous)) fetches the image using CORS anonymous mode. This gives authors fine-grained control over cross-origin access, subresource integrity, and referrer policy for CSS-loaded resources including images, fonts, SVG references, and imported stylesheets. Tracking bug #435625756 | ChromeStatus.com entry | Spec

CSS text-fit property

Scales the font size of text nodes to perfectly fit the width of its containing box. This property lets developers ensure headlines or dynamic content fill the available horizontal space without manual font-size calculations or complex JavaScript workarounds. It provides a robust, CSS-native solution for responsive typography that maintains visual alignment across different screen sizes and varying text lengths. Tracking bug #417306102 | ChromeStatus.com entry | Spec

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 border-width and border-style into account while ignoring transparency from border-color. This lets developers gradient borders without border-image. WebKit already ships this feature; this implementation brings Chromium to parity. Tracking bug #329302543 | ChromeStatus.com entry | Spec

CSS image() function

The image() function lets authors generate a solid-color image from any color. Its syntax is: image() = image( ) Tracking bug #510426954 | ChromeStatus.com entry | Spec

CSS light-dark() with image values

Extends the CSS light-dark() function to accept image values (url(), image-set(), none) in author stylesheets, letting image properties like background-image, list-style-image, border-image-source, cursor, and content automatically switch between images based on the user's preferred color scheme. Previously this was only allowed in UA stylesheets. This aligns with the CSS Color 5 specification and matches Firefox's existing implementation. Tracking bug #491829958 | ChromeStatus.com entry | Spec

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. Tracking bug #41491726 | ChromeStatus.com entry | Spec

Expose unprintable areas with 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 to be bigger than these areas, but if authors set margins on their own, and even want to add @page margin boxes (for example, for custom headers and footers), they need a way of telling where it's safe to print and not. The CSS descriptor page-margin-safety can be used to steer clear of such unprintable areas. Tracking bug #368070327 | ChromeStatus.com entry | Spec

flex-wrap: balance

flex-wrap: balance lets developers distribute content between flex-lines so that it appears more balanced (similar to text-wrap: balance). Tracking bug #416755656 | ChromeStatus.com entry | Spec

named-feature() function for CSS @supports

The named-feature() function lets CSS @supports rules 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 test for. Tracking bug #353715317 | ChromeStatus.com entry | Spec

overscroll-behavior: chain

overscroll-behavior now has for values: none, auto, contain and the new value chain. These values affect two independent effects: scroll propagation and local border effect (for example, overscroll stretch).

  • none: no propagation, no local effect
  • auto: propagation, local effect
  • contain: no propagation, local effect
  • chain: propagation, no local effect Tracking bug #499018879 | ChromeStatus.com entry | Spec
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 , , , , , , and ). Tracking bug #40670251 | ChromeStatus.com entry | Spec

DOM and HTML
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 only the first one in DOM order.
  • Updating the selectedcontent element is deferred when it would run during insertion, removal, or moving steps to fix security issues. The update is deferred by using post-insertion steps or microtasks. Tracking bug #458113204 | ChromeStatus.com entry | Spec
Focusgroup

Provides 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:

View original

Upgraded? How did it go?

Discussion