Chrome 137 的新功能

Rachel Andrew

發布日期：2025 年 5 月 27 日

Chrome 137 現已推出，這篇文章將介紹這個版本的主要功能。如要查看完整版本資訊，請參閱 Chrome 137 版本資訊。

這個版本的重要功能包括：

使用 reading-flow 和 reading-order，確保複雜版面配置中的索引標籤順序符合邏輯。CSS if() 函式提供簡潔的方式來表示條件值。JavaScript Promise Integration (JSPI) 可讓 WebAssembly 應用程式與 JavaScript Promise 整合。

CSS `reading-flow` 和 `reading-order`

reading-flow CSS 屬性可控制彈性、格線或區塊版面配置中的元素向無障礙工具公開的順序，以及使用線性循序導覽方法時的焦點順序。這項功能解決了格線和彈性版面配置長期存在的問題，也就是分頁順序可能會與項目版面配置順序中斷連線。

這個修飾符會採用一個關鍵字值，預設為 normal，可維持依 DOM 順序排序元素的行為。如要在彈性容器中使用，請將值設為 flex-visual 或 flex-flow。如要在格線容器中使用，請將值設為 grid-rows、grid-columns 或 grid-order。

reading-order CSS 屬性可讓你手動覆寫閱讀流程容器中的項目順序。如要在格線、彈性或區塊容器中使用這項屬性，請將容器的 reading-flow 值設為 source-order，並將個別項目的 reading-order 設為整數值。

如要瞭解詳情，請參閱「使用 CSS reading-flow 進行邏輯循序焦點導覽」。

CSS `if()` 函式

CSS if() 函式可讓您以簡潔的方式表示條件值。這個屬性接受一系列以半形分號分隔的條件/值組合。函式會依序評估各項條件，並傳回與第一個為 true 的條件相關聯的值。如果沒有任何條件評估結果為 true，函式會傳回空白權杖串流。

div {
  color: var(--color);
  background-color: if(style(--color: white): black; else: white);
}

.dark {
  --color: black;
}

.light {
  --color: white;
}

<div class="dark">dark</div>
<div class="light">light</div>

WebAssembly JavaScript Promise 整合 (JSPI)

JavaScript Promise Integration (JSPI) 是一種 API，可讓 WebAssembly 應用程式與 JavaScript Promise 整合。

可讓 WebAssembly 程式做為 Promise 的產生器，並與具有 Promise 的 API 互動。

具體來說，當應用程式使用 JSPI 呼叫含有 Promise 的 (JavaScript) API 時，WebAssembly 程式碼會暫停，而 WebAssembly 程式的原始呼叫端會收到 Promise，該 Promise 會在 WebAssembly 程式最終完成時履行。

還有其他眾多資源！

當然，還有許多其他功能：

為延續儲存空間分區功能，Chrome 已實作依儲存空間金鑰分割 Blob 網址存取權。
現在已實作 Canvas 浮點像素格式。
系統支援 offset-path: shape()，因此您可以使用回應式形狀設定動畫路徑。

延伸閱讀

這僅涵蓋部分重點。如要瞭解 Chrome 137 的其他變更，請參閱下列連結。

如要掌握最新資訊，請訂閱 Chrome 開發人員 YouTube 頻道，這樣每當我們發布新影片，您就會收到電子郵件通知。你也可以在 X 或 LinkedIn 上追蹤我們，取得最新文章和網誌貼文。

Chrome 138 發布後，我們會立即在此說明 Chrome 的新功能！

Chrome 137 的新功能 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

CSS reading-flow 和 reading-order

CSS if() 函式