好久没有联系了！ “Chrome 新变化”视频回归，为您介绍了以下内容：
- CSS text-box，可让您使用字体测量参数精确控制垂直间距。
- 现在，Android 和网页视图都支持 File System Access API。
- 使用
moveBefore以保留状态的方式移动 DOM 元素。 <dialog>元素支持轻触关闭。- 基准和更多部分也有很多更新！
我是 Mariko。我们来深入了解一下过去三个版本的 Chrome 中都新增了哪些功能。
CSS text-box
借助 CSS text-box 属性，您可以使用字体测量参数精确控制垂直间距。
每个字体都会在字符上方和下方产生不同的空格，这决定了元素的大小。
直到现在，我们都无法控制这些空格的大小。
新的 text-box-trim 属性用于指定要修剪的边（上方或下方），而 text-box-edge 属性用于指定修剪方式。例如，在大写字母顶部进行修剪。
您还可以使用简写的 text-box 属性编写此代码。
如需详细了解如何使用这些新属性，请参阅 CSS text-box-trim 一文。
File System Access API
DOM 基元 Node.prototype.moveBefore 在 Chrome 133 中新增，可让您在 DOM 树中移动元素，而无需重置元素的状态。
当您移除某个元素，然后重新插入该元素以移动 DOM 元素时，系统会重置该元素的状态。使用此新基元，可以保留节点的状态。
因此，iframe 会保持加载状态，活跃元素会保持焦点，弹出式窗口和对话框等内容会保持打开状态，CSS 转换或动画也会继续。
保留状态的 DOM 元素移动方式
File System Access API 已在 Chrome 桌面版上推出一段时间了。借助此 API，Web 应用可以与用户本地文件系统中的文件交互。从 Chrome 132 开始，该 API 也适用于 Android 和 WebView。
如需读取文件，请调用 showOpenFilePicker()。此方法会显示文件选择器，然后返回一个文件句柄，您可以使用该句柄读取文件。
let fileHandle;
btn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
// Do something with the file handle.
});
如需将文件保存到磁盘，您可以使用之前获取的文件句柄，也可以调用 showSaveFilePicker() 来获取新的文件句柄。
async function getNewFileHandle() {
const options = {
// Add options
};
const handle = await window.showSaveFilePicker(options);
return handle;
}
<dialog> 元素采用了轻量关闭方式
如果您使用过 Popover API 创建过弹出式窗口，就会知道 Popover API 的一项实用功能是轻触关闭行为。用户可以点击背景，而无需专门点击关闭按钮即可关闭弹出式窗口元素。
<dialog> 元素现在也支持此轻量关闭功能！
将 closedby 属性设置为 any 后，您可以通过点击对话框外部或按 Esc 键来关闭对话框。
<dialog closedby="any">...</dialog>
这与将 popover 设置为“auto”时的行为相同。
Baseline 中的更新
下面是有关 Baseline 的新闻
基准 新推出
首先，基准测试。这些功能是最近在所有四款主要浏览器中发布的。
scrollbar-gutter和scrollbar-width
借助 scrollbar-gutter CSS 属性，您可以为滚动条预留空间，以避免滚动条出现或消失时发生不必要的布局更改。借助 scrollbar-width，您可以创建更窄的滚动条，甚至可以完全隐藏滚动条，而不会影响滚动功能。
ruby-align
借助 ruby-align CSS 属性，您可以指定 Ruby 基本文本和 Ruby 注释文本的对齐方式。
Promise.try
Promise.try 是一种便捷的方法，可用于处理同步请求的错误。这样一来，当您尝试使用 Promise.resolve 进行请求时，就可以消除回调函数。
Wasm 垃圾回收和尾调用优化
WebAssembly 现在支持垃圾回收和尾调用优化。
基准 广泛提供
数组 findLast() 和 findLastIndex()
数组 findLast() 和 findLastIndex() 非常适合从数组的末尾获取项。所有主流浏览器已支持此功能 30 个月，这意味着该功能现已广泛纳入 Baseline。
单个转换属性
各个转换属性现已在基准广泛版中推出，可让您对 CSS 转换进行更精细的控制。
详细了解基准
如需详细了解基准值以及“新推出”和“广泛推出”之间的区别，请观看我制作的短视频。
您还可以在 Web 平台状态信息中心详细了解功能的基准状态！
2025 年互操作性项目再度启动
最后，互操作性项目将于 2025 年回归，并将重点关注以下领域：视图转换、CSS 锚点定位和 Navigation API。请务必查看项目公告！
订阅
如需及时了解最新动态，请订阅 Chrome 开发者 YouTube 频道，这样每当我们发布新视频时，您就会收到电子邮件通知。
我是 Mariko Kosaka，我将在 3 个月后回来，届时会详细介绍 Chrome 中的新变化！