'Google Chrome 140' stable release, many new CSS features added
The latest stable version of the web browser Google Chrome , version 140, has been released. There are many new features and changes to CSS.
Chrome 140 | Release notes | Chrome for Developers
◆CSS: Allows counter() and counters() to be used for the alt text of the content property
The counter() and counters() functions can now be used in the alternative text of the content property. Both of these functions return the value of the 'named counter ' specified in the argument, with counter() returning a single value and counters() corresponding to nested elements.
[code]
.simple-list li::before {
counter-increment: count;
content: 'chapter' counter(count, decimal) 'chapter';
}
.duplex-list li::before {
counter-increment: index;
content: 'chapter' counters(index, '.', decimal) 'chapter';
}[/code]
In the above example, the former is assumed to be applied to non-nested <li> elements, and will add strings such as 'Chapter 1' and 'Chapter 2' to the beginning of the list items. The latter is assumed to be applied to nested <li> elements, and will add strings such as 'Chapter 1.1' and 'Chapter 1.2' to the beginning of the list items. In this way, the aim is to improve accessibility by automatically generating and adding strings that make the element structure easier to understand.
◆CSS: scroll-target-group property
The scroll-target-group property specifies whether an element is a group container for scroll markers. There are two possible values:
none : The element does not establish a group container for scroll markers.
auto : The element establishes a scroll marker group container that forms a scroll marker group containing all scroll marker elements that are the group container of the nearest ancestor scroll marker.
Here, 'establishing a scroll marker group container' means that anchor HTML elements with fragment identifiers within such a container become equivalent to the ::scroll-marker pseudo-element. Anchor elements whose scroll targets are currently in view can then be styled using the :target-current pseudo-class. Pseudo-elements have various limitations. For example, specifying ::scroll-marker allows you to 'display the scroll target in view,' but does not allow you to 'track the current scroll marker.' However, by using the scroll-target-group property, you can treat HTML anchor elements as 'scroll markers' without using pseudo-elements, thereby avoiding these limitations and allowing you to style anchor elements using the :target-current pseudo-class. The scroll-target-group property is intended for use, for example, in easily creating carousel-like structures.
◆CSS: Typed arithmetic operations
Typed arithmetic allows you to write expressions in CSS such as 'calc(10em / 1px)' or 'calc(20% / 0.5em * 1px)'. More specifically, you can convert a typed value to an untyped value and assign it to a property that accepts a number, or cast from pixels to degrees and multiply the untyped value by a typed value. Previously, you had to use tricks like 'tan(atan2(length_value, 1px))' to remove the unit information, but with typed arithmetic, you can now get a unitless value just by using '(length_value / 1px)'.
CSS: View transition pseudo-elements now inherit more animation properties
The view transition pseudo-tree now inherits animation-delay and the following other animation properties:
・animation-timing-function
animation-iteration-count
・animation-direction
・animation-play-state
CSS: Support for font-variation-settings descriptor in @font-face rule
The font-variation-settings descriptor in @font-face allows you to adjust the weight, width, slant, and other axes of a font, similar to setting the font-variation-settings property in CSS for individual elements.
[code]
@font-face {
font-family: 'OpenTypeFont';
src: url('open_type_font.woff2') format('woff2');
font-variation-settings:
'wght' 400,
'wdth' 300;
}[/code]
◆ Nested view switching is enabled
View switching can now generate nested pseudo-element trees instead of flat pseudo-element trees, which means that view switching will be more in line with the underlying elements and their visual intent, allowing for effects such as clipping, nested 3D transforms, opacity, masking, and filters to be applied properly.
◆ Change the propagation source of viewport overscroll-behavior from root
Previously, overscroll-behavior propagated from the body (<body>). However, the CSS Working Group decided to deprecate this behavior and instead propagate from the root (<html>). Chrome has long propagated overscroll-behavior from <body> instead of from the root, but this change makes it compliant with the spec and consistent with other browsers.
◆ScrollIntoView container options
The ScrollIntoView container option allows developers to perform a scrollIntoView operation that only scrolls the nearest ancestor scroll container. For example, the below snippet will scroll only the target element's scroll container to bring the target into view, without scrolling all scroll containers into the viewport:
[code]
target.scrollIntoView({container: 'nearest'});[/code]
highlightsFromPoint API
The highlightsFromPoint API allows developers to manipulate custom highlights by retrieving an array of objects representing the custom highlights that exist at a particular point in the document, helping developers better manipulate and manage highlights in complex documents where multiple highlights overlap or exist within a shadow DOM.
[code]
const section = document.querySelector('section');
const pElem = document.querySelector('.highlightable-text');
const textNode = pElem.firstChild;
let highlightCount = 1;
pElem.addEventListener('dblclick', (event) => {
const highlights = CSS.highlights.highlightsFromPoint(
event.clientX,
event.clientY,
);
section.innerHTML = '';
for (highlight of highlights) {
const range = highlight.ranges[0];
const textSelection = range.toString();
section.innerHTML += `<article>${textSelection}</article>`;
}
});[/code]
◆Added source attribute to ToggleEvent
The source attribute is added to determine which element triggered the ToggleEvent. For example, if the user opens a popover by clicking a <button> element with a popovertarget or commandfor attribute, the source attribute of the ToggleEvent fired by the popover will have a reference to the <button> element that triggered it. This makes it easy to implement things like executing different code depending on which button was pressed.
[code]
const yesBtn = document.getElementById('yes');
const noBtn = document.getElementById('no');
const popover = document.getElementById('popover');
const output = document.getElementById('output');
if (yesBtn.command === undefined) {
output.textContent = 'Popover control command attribute not supported.';
} else {
popover.addEventListener('toggle', (event) => {
if (event.source === undefined) {
output.textContent = 'ToggleEvent.source not supported.';
} else if (event.source === yesBtn) {
output.textContent = 'Cookie set!';
} else if (event.source === noBtn) {
output.textContent = 'No cookie set.';
}
});
}[/code]
◆JavaScript: Change the timing of the Promise when the view transition is complete
Previously, the Promise returned when a view transition ended was within the rendering lifecycle step. Therefore, the code that received the Promise was executed after the visual frame that removed the view transition was generated. This could result in flickering at the end of the animation. With this change, the view transition cleanup procedure is now executed asynchronously after all processing is complete. This is expected to eliminate the flickering issue.
◆JavaScript: Supports conversion from Uint8Array to base64 or hexadecimal.
Base64 is a common way to represent arbitrary binary data as ASCII, and although JavaScript provides the Uint8Array class for handling binary data, it did not provide a built-in mechanism for encoding Uint8Array data as base64, or for receiving base64 data and creating a corresponding Uint8Array. This update adds methods to support these functions.
Uint8Array.prototype.setFromBase64() : Stores the byte sequence obtained from a base64-encoded string in a Uint8Array object.
・Uint8Array.prototype.setFromHex() : Obtain the byte sequence from a hexadecimal-encoded string and store it in a Uint8Array object.
Uint8Array.prototype.toBase64() : Returns a base64-encoded string based on the data in a Uint8Array object.
Uint8Array.prototype.toHex() : Returns a hex-encoded string based on the data in a Uint8Array object.
[code]
const uint8Array = new Uint8Array(16);
const result = uint8Array.setFromBase64('PGI+ TURO PC9i Pg==');
console.log(result);
// { read: 19, written: 10 }
console.log(uint8Array);
// Uint8Array(16) [60, 98, 62, 77, 68, 78, 60, 47, 98, 62, 0, 0, 0, 0, 0, 0][/code]
◆Web API: ReadableStreamBYOBReader min option
The existing ReadableStreamBYOBReader.read() method adds a min option. This method accepts an ArrayBufferView to read data from, but doesn't guarantee how many elements will be written before the read is resolved. By specifying a min option, you can request that the stream wait until at least that many elements are available before resolving the read. This improves on the current behavior, where a read may resolve with fewer elements than the view can hold.
HTTP Cookie Prefix
In some situations, it can be important to distinguish between cookies set on the server side and those set by the client. For example, a cookie that would normally be set by the server may be set on the client by unexpected code, such as an XSS exploit. This update adds a signal to identify which cookie was set by which means. Specifically, we've defined the __Http and __HostHttp prefixes, which can be used to prefix the name of a cookie set by the server to identify that the cookie was not set on the client side by a script.
◆Restricting access to the local network
We're restricting users' ability to send requests to the local network and prompting them for permission when such requests occur. These requests include requests from public websites to local IP addresses or loopbacks, and requests from local websites (such as an intranet) to loopbacks. The purpose of this change is to reduce the risk of Cross-Site Request Forgery (CSRF) attacks against local network devices like routers, and to eliminate the possibility that external sites could use these requests to fingerprint the local network.
◆IWA: Introduction of Controlled Frame API
We're adding the Controlled Frame API, available exclusively to Independent Web Apps (IWAs) . Like similarly named APIs on other platforms, Controlled Frame allows you to embed any content, including third-party content that cannot be embedded in an <iframe>. It also provides control over the embedded content using a collection of API methods and events.
controlled-frame/test_app at main · WICG/controlled-frame · GitHub
https://github.com/WICG/controlled-frame/tree/main/test_app
Deprecated: Special font size rules for <h1> within certain elements
The HTML specification included a list of special rules for the <h1> tag contained within elements such as <article>, <aside>, <nav>, and <section>. However, there were concerns that these special rules could cause accessibility issues. For example, the font size of the <h1> tag within these elements could be visually reduced to make it appear as if it were an <h2> tag. Naturally, this visual rhetoric would not be reflected in the accessibility tree. To address these issues, this update deprecates these special font size rules.
Deprecated: Stop sending Purpose: prefetch header from prefetching and prerendering
Prefetching and prerendering now use the Sec-Purpose header, so the Purpose: prefetch header will be removed.
◆Other updates
・CSS: caret-animation property
- SharedWorker scripts can now inherit the controller of the blob script URL
・Added ServiceWorkerStaticRouterTimingInfo
- Desktop support for Get Installed Related Apps API ( navigator.getInstalledRelatedApps ).
◆Origin Trial
・JavaScript: Added clipboardchange event
・Crash Reporting: Introducing the Key-Value API
・PWA: Enable incoming call notifications
・SharedWorker: Enabled on Android
Google Chrome 140 also includes numerous security bug fixes .
The next stable version, 'Google Chrome 141,' is scheduled to be released on Tuesday, September 30, 2025 local time.
Related Posts:
in Software, Posted by log1c_sh