Chrome 137 Beta 版

發布日期:2025 年 5 月 1 日

除非另有說明,否則下列變更適用於 Android、ChromeOS、Linux、macOS 和 Windows 的最新 Chrome 公開測試版頻道版本。如要進一步瞭解這裡列出的功能,請點選提供的連結,或參閱 ChromeStatus.com 上的清單。Chrome 130 為 2025 年 4 月 30 日的 Beta 版。您可以前往 Google.com 的電腦版或 Android 版 Google Play 商店下載最新版本。

CSS 和 UI

此版本新增了七項 CSS 和 UI 功能。

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>

reading-flowreading-order 屬性

reading-flow CSS 屬性會控制 Flex、格線或區塊版面配置中元素向無障礙工具公開的順序,並使用分頁鍵鍵盤焦點導覽功能將焦點放在該元素上。並使用下列其中一個關鍵字值:

  • normal
  • flex-visual
  • flex-flow
  • grid-rows
  • grid-columns
  • grid-order
  • source-order

reading-order CSS 屬性可讓您手動覆寫閱讀流程容器中的順序。這是一個整數,預設值為 0。

如要進一步瞭解相關資訊,請參閱「使用 CSS 閱讀流程,實現邏輯的連續焦點導覽」,並試用一些閱讀流程範例

offset-path: shape()

clip-path 已支援 shape() 函式,並允許回應式剪輯。將其也設為 offset-path 時,可縮小差距,讓同種形狀可用於該屬性。

支援 SVGSVGElement 上的轉換屬性

這項功能可讓您使用 transform 屬性,直接將變形屬性 (例如縮放、旋轉、平移和扭曲) 套用至 <svg> 根元素。這項強化功能可讓您整體操作整個 SVG 座標系統或其內容,在建立動態、回應式和互動式向量圖形時,提供更大的彈性。支援此屬性後,SVG 元素就能進行轉換,而不需要額外的包裝元素或複雜的 CSS 解決方法,進而簡化建立可調整大小和動畫網頁圖形的程序。

允許 <use> 省略片段,參照外部文件的根元素。

在這個功能中,我們會放寬參照需求,簡化 SVG <use> 元素。目前,您必須明確參照 SVG 文件中的片段。如果未提供片段 ID,<use> 就無法解析目標,且不會轉譯或參照任何內容。

有了這項功能,只要省略片段或提供外部 SVG 檔案名稱,系統就會自動參照根元素,因此您不必為了將 ID 指派給根目錄而變更參照的文件。這項強化功能可簡化手動編輯程序,提高效率。

accent-color 屬性適用的系統重點顏色已擴充至 Windows 和 ChromeOS

這樣一來,您就能使用作業系統的強調色彩為表單元素著色。使用 accent-color CSS 屬性,您可以確保表單元素 (例如核取方塊、單選按鈕和進度列) 會自動採用使用者作業系統定義的強調色。這項功能自 2021 年起已在 macOS 上支援,現在也支援 Windows 和 ChromeOS。

view-transition-name: match-element

view-transition 屬性的 match-element 值會根據元素身分產生專屬 ID,且此元素的 ID 會保持不變。這個屬性適用於單頁應用程式,當元素移動時,您希望透過檢視畫面轉場為其製作動畫。

網站 API

為「payment」WebAuthn 憑證建立作業擲回的錯誤類型對齊

修正為 payment 憑證建立 WebAuthn 憑證時,擲回的錯誤類型。由於歷史規格不相符,在跨來源 iframe 中建立 payment 憑證時,如果沒有使用者啟用,就會擲回 SecurityError,而不是 NotAllowedError,後者是為非付款憑證擲回的值。這是一項破壞性變更。先前偵測到擲回錯誤類型的程式碼 (例如 e instanceof SecurityError) 會受到影響。一般來說,在建立憑證時處理錯誤的程式碼 (例如 catch (e)) 會繼續正常運作。

Blob 網址分割:擷取/瀏覽

這是儲存空間分區功能的延伸,可根據儲存空間鍵 (頂層網站、影格來源和 has-cross-site-ancestor 布林值) 實作 Blob 網址存取的分區,但頂層瀏覽會例外,只會根據影格來源進行分區。

您可以設定 PartitionedBlobURLUsage 政策,暫時還原這項變更。當其他儲存空間分割相關的企業政策淘汰時,這項政策也會淘汰。

無回應網頁的當機報告中的呼叫堆疊

當網頁因 JavaScript 程式碼執行無限迴圈或其他非常長的運算而無回應時,這項功能會擷取 JavaScript 呼叫堆疊。這有助於開發人員找出無回應的原因,並更輕鬆地修正問題。當原因為無回應時,JavaScript 呼叫堆疊會包含在當機回報 API 中。

畫布浮點顏色類型

透過 CanvasRenderingContext2DOffscreenCanvasRenderingContext2DImageData,引進使用浮點像素格式 (而非 8 位元固定點) 的功能。這對高精確度應用程式 (例如醫學可視化)、高動態範圍內容和線性工作色彩空間而言,都是必要的。

禁止不受信任的明文 HTTP 預先顯示

目前預先轉譯功能可透過 HTTP 和 HTTPS 運作,但預先擷取功能僅適用於 HTTPS。限制預先轉譯功能與預先載入功能保持一致。

Document-Isolation-Policy

Document-Isolation-Policy 可讓文件為自身啟用 crossOriginIsolation,無須部署 COOP 或 COEP,也不受網頁的 crossOriginIsolation 狀態影響。這項政策由程序隔離功能支援。此外,文件非 CORS 跨來源子資源將在沒有憑證的情況下載入,或需要有 CORP 標頭。

如要進一步瞭解,請參閱「文件隔離政策:輕鬆啟用強大的網頁功能」。

網路密碼學中的 Ed25519

這項功能會在 Web Cryptography API 中新增對 Curve25519 演算法的支援,也就是簽章演算法 Ed25519

IP 位址記錄和報表

Chrome Enterprise 會收集及回報本機和遠端 IP 位址,並將這些 IP 位址傳送至安全調查記錄 (SIT),藉此強化安全監控和事件回應功能。此外,Chrome Enterprise 可讓管理員選擇使用 Chrome Enterprise 報表連接器,將 IP 位址傳送給第一方和第三方 SIEM 供應商。這項功能將開放給 Chrome Enterprise 基本版客戶使用。

JavaScript Promise 整合

JavaScript Promise 整合 (JSPI) 是一種 API,可讓 WebAssembly 應用程式與 JavaScript Promise 整合。這可讓 WebAssembly 程式充當 Promise 的產生器,並讓 WebAssembly 程式與含有 Promise 的 API 互動。特別是,當應用程式使用 JSPI 呼叫含有承諾 (JavaScript) API 時,WebAssembly 程式碼會暫停;而 WebAssembly 程式的原始呼叫端會收到承諾,在 WebAssembly 程式最終完成時會履行。

Language Detector API

Language Detector API 是 JavaScript API,可識別所提供字串的語言。這個 API 由基礎模型支援,該模型經過精密調整,可執行語言偵測工作。

在提供字串後,Language Detector API 會傳回已偵測語言的排序清單,以及每個結果的信心分數。

開發人員可以在建立語言偵測器例項時,選擇傳入預期輸入語言清單,以便針對預期會偵測特定語言的用途進行最佳化。

限制 SVGMatrixSVGRectSVGPoint 上的浮點屬性和引數

SVGMatrixSVGRectSVGPoint 上設定浮點屬性或引數時,現在無法將其設為 InfinityNan。根據 SVG 規格定義,如果您嘗試設定此屬性,系統會擲回 JavaScript 例外狀況。

Selection API getComposedRangesdirection

這項功能為 Selection API 提供兩種新的 API 方法:

  • Selection.direction,會將所選項目的方向傳回為 "none""forward""backward"
  • Selection.getComposedRanges() 會傳回 0 或 1 個「組合」的清單 StaticRange

一般範圍無法跨越陰影邊界,但「組合」StaticRange 則可。

例如:

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

如果所選範圍跨越 shadowRoots 清單中未提供的陰影根邊界,則 StaticRange 的端點會「重新設定範圍」,以便位於該樹狀結構之外。這可確保我們不會公開不明的陰影樹狀結構。

網頁應用程式範圍擴充功能

新增 scope_extensions 網頁應用程式資訊清單欄位,讓網頁應用程式將範圍擴大至其他來源。

範例:

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

這樣一來,控管多個子網域和頂層網域的網站就能以單一網路應用程式呈現。

需要使用 .well-known/web-app-origin-association 設定檔,確認列出的來源與網頁應用程式建立關聯。

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

WebAssembly 分支提示

透過告知引擎特定分支指令很可能會採用特定路徑,改善編譯 WebAssembly 程式碼的效能。這可讓引擎做出更明智的程式碼版面配置決策 (改善指令快取命中率) 和註冊分配。

WebGPU:GPUTextureView 用於 externalTexture 繫結

建立 GPUBindGroup 時,現在允許使用 GPUTextureView 進行 externalTexture 繫結。

WebGPU:copyBufferToBuffer 超載

GPUCommandEncoder copyBufferToBuffer() 方法現在提供更簡單的方式,可使用含有選用偏移量和大小參數的新過載來複製整個緩衝區。

新的來源試用

在 Chrome 137 中,您可以選擇參與下列新的來源測試

全影格速率轉譯封鎖屬性

在阻擋屬性中新增轉譯阻擋符號 full-frame-rate。如果轉譯器遭到完整影格速率符記阻斷,轉譯器會以較低的影格速率運作,以便保留更多資源供載入作業使用。

在未轉譯的 iframe 上暫停媒體播放

新增 "media-playback-while-not-rendered" 權限政策,讓嵌入者網站暫停未算繪的嵌入式 iframe 媒體播放,也就是將「display」屬性設為「none」。這樣一來,開發人員就能打造更符合使用者需求的體驗,並讓瀏覽器處理使用者看不到的內容播放作業,進而改善效能。

Rewriter API

Rewriter API 會在裝置端 AI 語言模型的支援下,以要求的方式轉換及重寫輸入的文字。開發人員可以使用這個 API 移除文字中的贅字,以符合字數限制;重新表達訊息,以符合目標對象或使訊息更具建設性 (如果訊息使用有害的用語);重新表達貼文或文章,以使用更簡單的字詞和概念等等。

Writer API

Writer API 可用於在收到寫作工作提示時,透過裝置端 AI 語言模型撰寫新內容。開發人員可以使用這個 API 產生結構化資料的文字說明,根據評論或產品說明撰寫產品相關文章,將優缺點清單擴充為完整的檢視畫面等等。