It's been a while! The New In Chrome video is back with information about:
- CSS text-box, which lets you control vertical spacing precisely by using the font metrics.
- The file system access API that's now supported on Android and web view.
- A State preserving way to move a DOM element with
moveBefore. - Light dismiss comes to the
<dialog>element. - And there's many updates in Baseline and more!
I'm Mariko. Let's dive in and see what's new in Chrome for the past three releases.
CSS text-box
The CSS text-box property lets you control vertical spacing precisely by using the font metrics.
Every font produces a different amount of space above, and below the characters, which determines the size of the element.
It has been impossible to control the size of these spaces until now.
The new text-box-trim property specifies the sides to trim, above or below,
and text-box-edge property specifies how it should be trimmed.
For example, trim at cap height, which is the top of uppercase characters.
You can also write this using the shorthand text-box property.
Find out more about how to use these new properties in the CSS text-box-trim article.
File system access API
Added in Chrome 133, a DOM primitive Node.prototype.moveBefore lets you move elements around a DOM tree, without resetting the element's state.
When you remove, then re-insert an element to move a DOM element, it will reset the state of that element. Using this new primitive, the state of a node is preserved.
So iframes remain loaded, active elements remain in focus, things like popovers and dialogs remain open, and CSS transitions or animations carry on.
State preserving way to move a DOM element
The File System Access API has been available on Chrome Desktop for some time now. This API lets web apps interact with files on the user's local file system. From Chrome 132, the API is available on Android and in WebViews as well.
To read a file, call showOpenFilePicker(). This method shows a file picker, then returns a file handle that you can use to read the file.
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
To save a file to disk, you can use the same file handle you got earlier, or call showSaveFilePicker() to get a new file handle.
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
Light dismiss comes to the <dialog> element
If you've used the Popover API to make a popover, you know that one of the nice features of Popover API is the light dismiss behavior. Users can click the background and the popover element is closed without specifically hitting the close button.
This light dismiss capability is now supported in the <dialog> element as well!
When you set closedby attribute to any, the dialog can be dismissed by clicking outside of the dialog or pressing escape keys.
<dialog closedby="any">...</dialog>
This is the same behavior as when a popover is set to auto.
Updates in Baseline
And, here's news about Baseline
Baseline Newly available
First, Baseline Newly available, these are features that shipped in all four major browsers recently.
scrollbar-gutter and scrollbar-width
With the scrollbar-gutter CSS property you can reserve a space for the scrollbar to avoid unwanted layout changes when the scrollbar appears or disappears. With scrollbar-width you can create a narrower scrollbar, or even to hide the scrollbar completely without affecting scrollability.
ruby-align
With the ruby-align CSS property you can specify alignment of ruby base text and ruby annotation text.
Promise.try
Promise.try is a convenience method to make error handling for synchronous requests. Using this, you can eliminate callback functions when you try to request with Promise.resolve.
Wasm Garbage Collection and tail call optimizations
WebAssembly now supports Garbage Collection and tail call optimizations.
Baseline Widely available
Array findLast() and findLastIndex()
Array findLast() and findLastIndex() are very convenient methods to get items from the end of an array. This feature has been supported by all major browsers for 30 months, which means it is now Baseline widely available.
Individual transform properties
Individual transform properties which give you finer grained control over CSS transforms are now Baseline Widely available as well .
More about Baseline
If you want to know more about Baseline and the difference between Newly and Widely available, check out the short video I made.
You can also find more about the baseline status of a feature at the Web Platform Status dashboard !
Interop project is back for 2025
And lastly, the Interop project is returning for 2025 with a list of focus areas including view transitions, CSS anchor positioning, and the Navigation API. Be sure to check out the project announcement!
Subscribe
To stay up to date, subscribe to the Chrome Developers YouTube channel, and you'll get an email notification whenever we launch a new video.
I'm Mariko Kosaka, and I will be back in three months to tell you more about What’s new in Chrome!