# Google Chrome 137

- Product: Google Chrome (https://whatsnew.fyi/product/google-chrome)
- Vendor: Google
- Date: 2025-05-27
- Version: 137
- Original notes: https://developer.chrome.com/release-notes/137
- Permalink: https://whatsnew.fyi/product/google-chrome/releases/137

What's New is an index, not a publisher: every entry below links to the vendor's own release notes, which are the authoritative source. Entries are labelled where they are hand-curated sample data, pre-releases, or drawn from a secondary source such as a developer blog.

Reuse: the summaries, labels and curation here are © What's New. Quote freely with attribution and a link back; wholesale republication of the corpus is not permitted — terms: https://whatsnew.fyi/terms. The vendors' own release notes remain their publishers'.

---

- **added** — CSS if() function provides a concise way to express conditional values by accepting condition-value pairs and returning the value associated with the first true condition
- **added** — CSS reading-flow property controls the order in which elements in flex, grid, or block layouts are exposed to accessibility tools and focused using tab keyboard navigation
- **added** — CSS reading-order property allows authors to manually override the order within a reading flow container
- **changed** — Letter-spacing setting is now ignored for cursive scripts including Arabic, Hanifi Rohingya, Mandaic, Mongolian, N'Ko, Phags Pa, and Syriac to ensure proper readability
- **added** — Selection.direction API method returns the selection's direction as either none, forward, or backward
- **added** — Selection.getComposedRanges() API method returns a list of composed StaticRange that are allowed to cross shadow boundaries
- **added** — Support offset-path: shape() to allow using responsive shapes to set the animation path
- **added** — Transform attribute on SVGSVGElement enables the application of transformation properties such as scaling, rotation, translation, and skewing directly to the svg root element
- **added** — System accent color for accent-color property on Windows and ChromeOS allows form elements such as checkboxes, radio buttons, and progress bars to automatically adopt the accent color defined by the user's operating system
- **changed** — SVG use element can now reference an external document's root element by omitting the fragment identifier instead of requiring an explicit fragment ID
- **added** — Canvas floating point color types enable the use of floating point pixel formats with CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D, and ImageData for high precision applications and high dynamic range content

Stable release date: May 27th, 2025
Unless otherwise noted, the following changes apply to Chrome 137 stable channel release for Android, ChromeOS, Linux, macOS, and Windows.
##### CSS and UI
###### CSS if() function
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 lets you express complex conditional logic in a simple and concise way.
Example:
div { color: var(--color); background-color: if(style(--color: white): black; else: white); } .dark { --color: black; } .light { --color: white; }
<div class="dark">dark</div> <div class="light">light</div>
Tracking bug #346977961 | ChromeStatus.com entry | Spec
###### CSS reading-flow, reading-order properties
The reading-flow CSS property controls the order in which elements in a flex, grid, or block layout are exposed to accessibility tools and focused using tab keyboard focus navigation.
The reading-order CSS property allows authors to manually-override the order within a reading flow container. It is an integer with default value of 0.
Learn more about these properties in Use CSS reading-flow for logical sequential focus navigation, and try out some examples.
Tracking bug #40932006 | ChromeStatus.com entry | Spec
###### Ignore letter spacing in cursive scripts
This feature adds logic to ignore the letter-spacing setting for cursive scripts as specified by the developer, in line with the specification, to ensure that letter spacing does not disrupt word structure and aims to produce better user experience for users relying on cursive scripts.
With this feature, Chrome ensures that cursive scripts will be readable and properly spaced, even if the fonts don't have advanced typographic features.
The scripts this applies to in Chromium are Arabic, Hanifi Rohingya, Mandaic, Mongolian, N'Ko, Phags Pa, and Syriac as these scripts are considered cursive as per the specification.
Tracking bug #40618336 | ChromeStatus.com entry | Spec
###### Selection API getComposedRanges and direction
This feature ships two new API methods for the Selection API:
- Selection.direction which returns the selection's direction as either none, forward, or backward
- Selection.getComposedRanges() which returns a list of 0 or 1 composed StaticRange
A composed StaticRange is allowed to cross shadow boundaries, which a normal Range cannot.
For example:
const range = getSelection().getComposedRanges({ shadowRoots: [root] });
If the selection crosses a shadow root boundary that isn't provided in the shadowRoots list, then the endpoints of the StaticRange will be rescoped to be outside that tree. This makes sure Chrome doesn't expose unknown shadow trees.
Tracking bug #40286116 | ChromeStatus.com entry | Spec
###### Support offset-path: shape()
Support offset-path: shape(), to allow using responsive shapes to set the animation path.
Tracking bug #389713717 | ChromeStatus.com entry | Spec
###### Support the transform attribute on SVGSVGElement
This feature enables the application of transformation properties—such as scaling, rotation, translation, and skewing—directly to the <svg> root element using its transform attribute. This enhancement lets you manipulate the entire SVG coordinate system or its contents as a whole, providing greater flexibility in creating dynamic, responsive, and interactive vector graphics. By supporting this attribute, the <svg> element can be transformed without requiring additional wrapper elements or complex CSS workarounds, streamlining the process of building scalable and animated web graphics.
Tracking bug #40313130 | ChromeStatus.com entry | Spec
###### System accent color for accent-color property
This lets you use the operating system's accent color for form elements. By using the accen

_[Truncated at 4000 characters — full notes: https://developer.chrome.com/release-notes/137]_