'Google Chrome 142' stable release, CSS range syntax support, style queries and if() functions improved

The latest stable version of the Google Chrome web browser, version 142, has been released. It includes several new features and improvements, such as support for CSS range syntax, enhanced functionality for style queries and the if() function, and unified rendering of the <select> element between mobile and PC versions.

Chrome 142 | Release notes | Chrome for Developers
https://developer.chrome.com/release-notes/142

◆CSS range syntax support
CSS now supports range syntax , enhancing the functionality of style queries and the if() function. Previously, style queries and the if() function required an exact match of the condition.
[code]
@container style(--theme: dark) {
background-color: black;
color: white;
}[/code]

With this update, you can now use range syntax to apply styles even when the conditions are within the range. You can specify ranges using comparison operators, combining custom properties, literal values like 10px or 25%, and substitution functions like attr() and env(). However, for a valid comparison to be performed, both sides of the comparison operator must be resolvable to the same data type. Also, comparisons are limited to the following numeric types:
·length
·quantity
·percent
·angle
·time
·frequency
·resolution

The following code example shows how to compare a custom property with a literal value:
[code]
@container style(--inner-padding > 1em) {
.card {
border: 2px solid;
}
}[/code]

The following code example compares two literal values:
[code]
@container style(1em < 20px) {
/* ... */
}[/code]

Below is a code example that uses range syntax with the if() function.
[code]
.item-grid {
background-color: if(style(attr(data-columns, type ) > 2): lightblue; else: white);
}[/code]

◆Unify the rendering of the <select> element on mobile and PC
The size and multiple attributes allow the <select> element to be rendered as a list box or a button with a popup. Previously, the rendering results differed between the mobile and PC versions, with the list box not being available on the mobile version and the popup button not being available on the PC version when the multiple attribute was present. With this update, the list box has been introduced on the mobile version and the popup button on the PC version, unifying the rendering for both.

The specific updates are as follows:
- Listboxes are now always visible if the size attribute value is greater than 1.
- A list box is now displayed when the multiple attribute is set without the size attribute.
- A button with a popup is now displayed when the size attribute value is 1 and the multiple attribute is set.

◆ Maintain user activation across navigations initiated on the same origin
Previously, the user's activation state was not maintained on pages after navigation, which meant that some use cases, such as displaying a virtual keyboard on auto-focus, did not work. This caused a hurdle in implementations when building web apps as MPAs rather than SPAs.

With this update, the use cases mentioned above are supported by preserving user activations across navigations initiated on the same origin, even after the page navigates to another page on the same origin. However, browser-initiated navigation requests such as 'reloads,' 'history navigations,' and 'direct typing from the URL bar' will still reset user activations.

◆ :target-before pseudo-class and :target-after pseudo-class
New pseudo-classes, :target-before and :target-after , have been added to represent elements before and after the active marker in the same scroll marker group as the active marker element indicated by :target-current .
:target-before: indicates all scroll markers in the group that are before the active marker in flat tree order.
:target-after: indicates all scroll markers that follow the active marker in flat tree order within the group.

These pseudo-classes allow you to apply common styles to elements before or after the active marker element.

◆Other updates
・Absolute positioning of the ::view-transition element: Change from 'position: fixed' to 'position: absolute'
document.activeViewTransition: A property that always references the transition object of the View Transitions API.
- interestfor attribute: When a user 'shows interest' in an element, an action is triggered on the target element.
・SVG <a> element: Supports the download attribute
・WebGPU : Added primitive_index function
・WebGPU: Support for texture formats tier 1 and tier 2
FedCM : Added support for displaying the iframe origin in the UI for third-party iframes.
JSON module: *+json MIME token validation tightened
Web Speech API : Added the ability to bias speech recognition by adding a list of recognition phrases.
- Media Session API : Added the trigger reason (enterPictureInPictureReason) to the detailed information sent with the enterpictureinpicture action.
- Restrict local network access

◆Origin Trial
Binding session credentials to a specific device

Google Chrome 142 also includes many security bug fixes .

The next stable version, Google Chrome 143, is scheduled to be released on Tuesday, December 2, 2025 local time.