好久不見！ 「Chrome 新功能」影片回來了，這次將介紹以下內容：
- CSS text-box，可讓您使用字型規格來精確控制垂直間距。
- 目前 Android 和 WebView 都支援檔案系統存取 API。
- 使用
moveBefore保留狀態的方法來移動 DOM 元素。 - Light dismiss 會傳送至
<dialog>元素。 - Baseline 和其他功能也有很多更新！
我是 Mariko。讓我們深入瞭解 Chrome 過去三個版本中的新功能。
CSS text-box
您可以使用 CSS text-box 屬性，透過字型指標精確控制垂直間距。
每個字型會在字元上方和下方產生不同數量的空格，這會決定元素的大小。
但過去無法控制這些空格的大小。
新的 text-box-trim 屬性會指定要裁剪的側邊 (上方或下方)，而 text-box-edge 屬性則會指定裁剪方式。例如，在大寫字母頂端的高度修剪。
您也可以使用簡寫 text-box 屬性來編寫這段程式碼。
如要進一步瞭解如何使用這些新屬性，請參閱 CSS text-box-trim 文章。
檔案系統存取 API
在 Chrome 133 中新增的 DOM 原始元素 Node.prototype.moveBefore 可讓您在 DOM 樹狀結構中移動元素，而無須重設元素的狀態。
移除元素，然後重新插入元素來移動 DOM 元素時，系統會重設該元素的狀態。使用這個新原語時，節點的狀態會保留。
因此，iframe 會持續載入、有效元素會持續聚焦、彈出式視窗和對話方塊會持續開啟，CSS 轉場或動畫也會繼續執行。
可保留狀態的 DOM 元素移動方式
檔案系統存取 API 已在 Chrome 電腦版上推出一段時間。這個 API 可讓網頁應用程式與使用者本機檔案系統中的檔案互動。自 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 後，只要點選對話方塊外部或按下 Escape 鍵，即可關閉對話方塊。
<dialog closedby="any">...</dialog>
這與將彈出式視窗設為自動的行為相同。
基準更新
以下是 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 轉換，現在也已在 Baseline Widely 中提供。
進一步瞭解基準
如要進一步瞭解基準值，以及新推出和廣泛推出的差異，請觀看我製作的短片。
您也可以前往網路平台狀態資訊主頁，進一步瞭解功能的基本狀態！
互通性專案將於 2025 年回歸
最後，互通性專案將在 2025 年回歸，並列出一系列重點領域，包括檢視畫面轉場、CSS 錨點定位和 Navigation API。請務必查看專案公告！
訂閱
如要隨時掌握最新消息，請訂閱 Chrome 開發人員 YouTube 頻道，這樣一來，我們發布新影片時，你就會收到電子郵件通知。
我是 Mariko Kosaka，我會在三個月後回來，進一步說明 Chrome 的新功能！