Chrome 148 Beta 版

Rachel Andrew

發布日期：2026 年 4 月 8 日

除非另有說明，否則下列變更適用於 Android、ChromeOS、Linux、macOS 和 Windows 的最新 Chrome Beta 版。如要進一步瞭解這些功能，請使用提供的連結或前往 ChromeStatus.com。本次發布的 Chrome 版本為 Beta 版。如要下載最新 Beta 版，請前往 Google.com (電腦) 或 Google Play 商店 (Android)。

CSS 和 UI

CSS 中僅限名稱的容器查詢

現在只要根據 CSS 容器的 container-name 即可查詢，不必在元素中設定 container-type。

#container {
  container-name: --foo;
}
@container --foo {
  input { background-color: green; }
}

<div id="container">
  <div><input></div>
</div>

在使用者互動時裁剪溢位文字

當使用者與設有 text-overflow: ellipsis 的文字互動 (例如編輯或使用插入點導覽) 時，文字會暫時從省略號切換為剪輯。使用者就能查看隱藏的溢位內容並與之互動。這項功能適用於所有可編輯和不可編輯的元素。表單控制項 (例如 <textarea> 和 <input>) 已支援這項行為。

為 `dragEnter`、`dragLeave` 和 `dragOver` 事件正確設定 `dropEffect`

拖曳規格要求 dataTransfer 物件的 dropEffect 屬性在 dragEnter、dragOver 和 dragLeave 上具有特定預先決定的值。dragEnter 和 dragOver 應根據目前的 effectAllowed 具有 dropEffect。dragLeave 一律應包含 none dropEffect。目前 Chrome 不會遵守這些規則。從 Chrome 148 開始，Chrome 會遵守規格，並為這個屬性指派正確的值。

延遲載入影片和音訊元素

這項功能會將 loading 屬性新增至 <video> 和 <audio> 元素。開發人員可使用 loading="lazy" 延遲載入媒體資源，直到元素接近可視區域為止。這與 <img> 和 <iframe> 元素的現有延遲載入行為相符，可提升載入網頁效能並減少數據用量。

用於功能偵測的 CSS `at-rule()` 函式

這項功能會在 CSS @supports 中新增 at-rule() 函式，讓作者偵測 CSS at 規則的支援情形。

新增 `revert-rule` 關鍵字

revert-rule 關鍵字會將層疊還原至先前的規則，類似於 revert-layer 將層疊還原至先前的圖層。例如：

div { color: green; }
div { color: revert-rule; /* Effectively green */ }

這項功能在搭配條件式時特別實用，因為如果條件不符，您就能排除目前的規則：

div {
  display: if(style(--layout: fancy): grid; else: revert-rule);
}

支持「`text-decoration-skip-ink: all`」

這項功能為 CSS text-decoration-skip-ink 屬性新增 all 值。text-decoration-skip-ink 屬性已支援 auto 和 none。all 值會將墨水跳過功能無條件套用至所有字形，包括中日韓字元，藉此擴充這項功能。相較之下，auto 不會略過中日韓字元，因為在一般底線位置，墨水略過功能往往會對表意文字產生不良的視覺效果。使用 text-decoration-skip-ink: all 時，如果作者已調整 text-underline-position 或 text-underline-offset，避免與中日韓文 (CJK) 字形發生衝突，可以明確選擇為這些字元啟用墨水跳過功能。

網站 API

本地化資訊清單成員

這項功能支援資訊清單成員的本地化，可讓應用程式根據使用者的語言和地區調整名稱、說明、圖示和捷徑。開發人員會在網頁應用程式資訊清單中提供本地化值。瀏覽器會根據使用者的語言設定自動選取適當的資源，進而為不同市場提供語言支援。

支援 Open Font Format `avar2`，可進行文字成形和字符算繪

字軸變化 (Axis Variations) 資料表第 2 版可讓字型設計師建立變數字型，並進一步控制插補。avar原始的可變字型規格會獨立處理軸，但 avar2 允許軸相互影響。這樣一來，內容作者就能更輕鬆地使用字型，並節省儲存空間。

Avar2 的運作方式與字型變體概念相同，但可讓您將變數增量值套用至設計軸本身。您可以在多個軸上執行這項操作。

舉例來說，您可以建立中繼滑桿，一次控制多個變異軸。這樣一來，使用者就不必微調字型設計空間，也不用尋找實用的角落。

Avar2 可讓字型設計師進一步控管字型的可用變異空間，並協調多個軸的設計軸調整作業。在 avar 第 2 版表格中，透過數學方式定義軸之間的關係，字型就能以較少的母版實現複雜設計。這樣一來，由於插補作業的儲存效率更高，檔案大小也會縮小。

Web Authentication Immediate UI 模式

這個 navigator.credentials.get() 的新模式會導致瀏覽器向使用者顯示瀏覽器登入使用者介面，前提是瀏覽器立即知道網站的密碼金鑰或密碼。否則，如果沒有這類憑證，系統會使用 NotAllowedError 拒絕 Promise。如果瀏覽器可以提供可能成功的登入憑證選項，網站就能避免顯示登入頁面。但如果沒有這類憑證，系統仍會允許登入頁面流程。

Android 上的 Web Serial API 支援

Web Serial API 提供連線至序列裝置的介面。這類裝置可透過使用者系統上的序列埠連線，或透過模擬序列埠的可移除式 USB 和藍牙裝置連線。Android 現在支援這項 API。

使用者 (尤其是教育、業餘和工業領域) 會將周邊裝置連接至電腦，並需要自訂軟體來控制這些裝置。舉例來說，學校通常會使用機器人教學，這需要能將程式碼上傳至機器人或從遠端控制機器人的軟體。在工業或業餘環境中，設備 (例如銑床、雷射切割機或 3D 印表機) 由連線電腦上執行的程式控制。這些裝置通常由小型微控制器透過序列連線控制。

WebGPU `linear_indexing` 功能

這項功能新增了兩個新的運算著色器內建值，可提升使用者體驗。這些值會針對所有後端實作 (做為現有內建值的 Polyfill)。

Android 支援 `SharedWorker`

長期以來，由於擔心程序生命週期難以預測，Android 裝置已停用 SharedWorker。Chrome 開發人員認為 SharedWorker 執行個體可能會在未通知使用者或網頁開發人員的情況下意外終止。因此判定為不當內容。

不過，GitHub 上最近的討論指出，SharedWorker 的程序生命週期不可預測，可能不像先前認為的那麼重要。因此，Chrome 將在 Android 上重新啟用 SharedWorker，同時調查這項行為，確保提供穩定可靠的使用體驗。

延長共用工作站的生命週期

這項更新在 SharedWorker 建構函式中新增了 extendedLifetime: true 選項。這項要求會讓共用工作站保持運作，即使所有目前的用戶端都已卸載也一樣。主要用途是讓網頁在卸載後執行需要 JavaScript 的非同步工作，不必依賴 Service Worker。

提示 API

網頁開發人員可透過 Prompt API 直接存取瀏覽器提供的裝置端 AI 語言模型。API 設計提供精細的控制項，與雲端 API 形狀一致。您可以根據個別使用案例，逐步強化網站與模型的互動。這項功能可輔助以工作為基礎的語言模型 API (例如 Summarizer API)，以及各種 API 和架構，讓開發人員提供的 ML 模型在裝置端進行一般推論。初步實作支援文字、圖片和音訊輸入，以及回覆限制，確保生成的文字符合預先定義的規則運算式和 JSON 結構定義格式。

這項功能支援多種用途。例如生成圖片說明、執行圖像搜尋、轉錄音訊、分類聲音事件、按照特定指示生成文字，以及從多模態來源資料擷取資訊或洞察資料。

這項 API 已在 Chrome 擴充功能中發布。這項意圖會追蹤網站上的運送情形。企業政策 GenAILocalFoundationalModelSettings 可用於停用基礎模型下載作業，進而導致這個 API 無法使用。企業管理員也可以設定 BuiltInAIAPIsEnabled 政策，禁止使用內建 AI API，但仍允許其他裝置端生成式 AI 功能。

語言支援記錄：

Chrome 139 以上版本僅支援英文 ('en')
Chrome 140 新增了西班牙文和日文的支援 ('es' 和 'ja')

取得安全付款確認功能

這項功能會在 Payment Request API 中新增靜態方法，讓網頁開發人員取得瀏覽器實作 Secure Payment Confirmation 的功能。這有助於網頁開發人員瞭解安全付款確認功能有哪些可用功能。然後決定是否要使用具備這些功能的「安全付款確認」。

IDNA ContextJ 規則

IDNA 是網域名稱中非 ASCII 字元的機制。它會將網址 (例如 http://네이버.한국/) 編碼為 http://xn--950bt9s8xi.xn--3e0b707e/ (重新導向至 naver.com)。

網址規格會設定 CheckJoiners 旗標，啟用 IDNA2008 中的 ContextJ 規則。這項規則會禁止在網址的大部分位置使用 ZWNJ (U+200C ZERO WIDTH NON-JOINER) 和 ZWJ (U+200D ZERO WIDTH JOINER)。實作會將 UIDNA_CHECK_CONTEXTJ 選項傳遞至 ICU，並在其中實作這項規則。

在相同來源重新指派時重複使用 no-store 圖片

當相同 src 值重新指派給 <img> 元素時，這項功能可讓相同文件可用的圖片重複使用，略過 Cache-Control: no-store 重新載入。先前，即使圖片已解碼並可在文件中使用，Blink 仍會重新擷取圖片。這與現有的 Gecko 和 WebKit 行為一致。

將 `contentType` 欄位新增至資源時間

這項功能會在 PerformanceResourceTiming 中新增 contentType 欄位，用來保存與擷取資源內容類型相應的字串 (由伺服器傳回)。

在拖曳開始時禁止指標事件

根據 HTML 規格，拖曳開始時，使用者代理程式應將適當的事件傳送至拖曳來源，指出指標事件串流已結束，且不應預期來自這個指標的任何事件。這段程式碼已部分實作滑鼠事件，並完整實作 Android 上的觸控拖曳動作。Chrome 的目標是在所有其他平台上，完全滿足這項規格要求。實際上，這表示拖曳作業開始後，拖曳來源現在會收到 pointercancel、pointerout 和 pointerleave 事件，指出目前的事件串流已完成。

WebRTC Datachannel：一律協商資料管道

這項功能會實作 WebRTC 擴充功能 alwaysNegotiateDataChannels，定義應用程式在建立資料通道前，於 SDP 提案中協商資料通道的方式。這也會在任何音訊或視訊 m 區段之前，先協商資料 m= 區段，並將其做為 [BUNDLE] 的「提供者標記 m= 區段」。

也就是說，如果您使用 alwaysNegotiateDataChannels: true 建立 RTCPeerConnection，然後呼叫 createOffer()，系統就會在 SDP 中建立含有應用程式 m 行的提案。例如：

  const pc = new RTCPeerConnection({
    alwaysNegotiateDataChannels: true});
  const offer = await pc.createOffer();

如果您也新增音訊收發器和資料管道，提議會在 SDP 中依序協商應用程式 m 行和音訊 m 行：

  const pc = new RTCPeerConnection({
    alwaysNegotiateDataChannels: true});
  pc.addTransceiver('audio');
  pc.createDataChannel('somechannel');
  const offer = await pc.createOffer();

新的來源試用

在 Chrome 148 中，您可以選擇加入下列新的來源試用。

代理程式聯合登入

一組 FedCM 擴充功能，可協助代理程式瀏覽器使用者的聯合帳戶安全登入網站。

連線許可清單

連線允許清單功能可限制從文件或 Worker 透過 Fetch API 或其他網頁平台 API 啟動的連線，明確控管外部端點。建議的實作方式是透過 HTTP 回應標頭，從伺服器發布授權端點清單。使用者代理程式代表網頁建立任何連線前，會先根據這份允許清單評估目的地。系統允許連線至已驗證的端點，但會封鎖與清單中項目不符的連線。

容器時間

透過 Container Timing API，您可以監控 DOM 中加上註解的部分何時顯示在畫面上，以及何時完成初始繪製。您可以使用 containertiming 屬性標記 DOM 的子區段 (類似於 Element Timing API 的 elementtiming)，並在該區段首次繪製時收到效能項目。這項 API 可讓您評估網頁中各種元件的時間。

宣告式 CSS 模組指令碼

宣告式 CSS 模組指令碼是現有指令碼式 CSS 模組指令碼的擴充功能。開發人員可透過這些功能，與陰影根 (包括宣告式陰影根) 共用宣告式樣式表。開發人員可以使用 <style type="module" specifier="foo"> 定義內嵌樣式模組，並透過參照 specifier 或網址 (例如 <template shadowrootmode="open" shadowrootadoptedstylesheets="foo">)，將宣告式模組套用至宣告式陰影 DOM。

畫布中的 HTML

HTML-in-canvas 是新的 API，可讓您直接將轉譯 DOM 元素自訂至畫布或 WebGL / WebGPU 紋理，同時維持內容的互動性和無障礙功能。這個函式有三個部分：選擇加入畫布元素的屬性 (layoutsubtree)、繪製子元素的方法 (2d: drawElementImage、webgl:texElementImage2D、webgpu: copyElementImageToTexture)，以及在畫面上正確更新元素轉換，以實現互動功能的方法。

長動畫影格樣式時間長度

這項功能會在 Long Animation Frame API 中新增 styleDuration 和 forcedStyleDuration 資訊。開發人員可藉此區分樣式和版面配置時間。

`OpaqueRange`

OpaqueRange 代表表單控制項值內的即時文字範圍 (例如 <textarea> 或文字 <input>)，因此開發人員可以使用類似範圍的 API 處理值文字。

這項功能可啟用 getBoundingClientRect()、getClientRects() 等作業，並搭配 CSS Highlights API 使用，提供內嵌建議、醒目顯示和錨定快訊等 UI。它只會公開值偏移 (並為 startContainer 和 endContainer 傳回空值)，因此不會公開 DOM 端點和內部結構，可維護封裝。

剖析 HTML 中的處理指令

處理指令 (語法：<?target data>) 是 XML 中公開的現有 DOM 建構函式。這個建構體可讓非元素的節點物件，在處理文件時具有語意含義。舉例來說，您可以使用這些屬性標示串流或醒目顯示的範圍，無須使用新的 DOM 元素，也不必變更 CSS 相關的 DOM 結構。您也可以將這些標記當做 HTML 剖析器的指令，瞭解如何緩衝及串流。

權限政策：focus-without-user-activation

這項政策可讓嵌入者透過 focus-without-user-activation 權限政策，控管嵌入內容的程式輔助焦點。如果頁框遭到政策拒絕，系統會封鎖程式輔助焦點呼叫 (element.focus()、autofocus、window.focus()、dialog.showModal() 和快顯視窗焦點)，除非是由使用者啟動。使用者發起的焦點 (例如點選或按 Tab 鍵) 絕不會受到影響。您可以透過 Permissions-Policy HTTP 回應標頭或 iframe allow 屬性設定政策。支援焦點委派。即使子項遭拒絕政策，具有焦點的父項影格仍可透過程式輔助方式，將焦點傳遞至子項 iframe。框架取得焦點後，即可在自己的子樹狀結構中移動焦點。

Prompt API 取樣參數

這項功能會將取樣參數新增至提示 API。這些參數會控管模型如何取樣權杖，讓開發人員控管輸出的創意或隨機程度。此外，它還會將屬性新增至 LanguageModel 執行個體，以便讀取設定的值。此外，這個類別還會新增靜態 LanguageModel 函式，用於取得這些參數的預設值和最大值。第一個實作會新增 temperature 和 topK 參數。

網頁應用程式 HTML 安裝元素

這項功能可讓網站以宣告方式提示使用者安裝網頁應用程式。這個元素可選擇接受兩個屬性，讓您從不同來源安裝內容。

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