Chrome 148

穩定版發布日期:2026 年 5 月 5 日

除非另有說明,否則下列異動適用於 Android、ChromeOS、Linux、macOS 和 Windows 的 Chrome 148 穩定版。

CSS 和 UI

僅限名稱的 CSS 容器查詢

CSS 查詢容器只能根據容器名稱查詢,且容器不需要設定任何 container-type:

#container {
  container-name: --foo;
}
@container --foo {
  input { background-color: green; }
}
<div id="container">
  <div><input></div>
</div>

先前,@container 除了名稱外,還需要容器類型。

追蹤錯誤 #40287550 | ChromeStatus.com 項目 | 規格

At 規則:CSS 功能偵測

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

追蹤錯誤 #40211832 | ChromeStatus.com 項目 | 規格

開放字型格式 avar2 文字成形和字符算繪

字體設計人員可透過第 2 版的 avar (軸變化) 表格,建立可變字體,並進一步控制插補。原始可變字型規格會獨立處理軸,但 avar2 允許軸互相影響。這可讓內容作者更輕鬆地使用字型,並啟用精簡儲存空間。

Avar2 採用與字型變體相同的概念,但會將變數增量值套用至設計軸規格本身。此外,您還可以在多個軸的範圍內執行這項操作。

舉例來說,字型設計師可以建立「中繼滑桿」,一次控制多個變異軸,讓使用者不必微調,就能找到字型設計空間中實用的角落。

Avar2 可讓字型設計師更妥善地控管字型的可用變異空間,並協調多個軸的設計軸調整作業。

在 avar 第 2 版表格中,以數學方式定義軸之間的關係,字型就能以較少的母版實現複雜設計,進而縮小檔案大小,因為插補作業的儲存效率更高。

追蹤錯誤 #40246300 | ChromeStatus.com 項目 | 規格

還原規則關鍵字

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

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

這項功能搭配條件式時特別實用,因為如果未滿足某些條件,您就能排除目前的規則:

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

追蹤錯誤 #393582263 | ChromeStatus.com 項目 | 規格

影片和音訊元素的延遲載入

<video><audio> 元素中新增 loading 屬性,讓開發人員使用 loading="lazy",將媒體資源載入作業延後到元素靠近檢視區塊時再執行。這與 <img><iframe> 元素的現有延遲載入行為相符,可提升載入網頁效能並減少數據用量。

追蹤錯誤 #469111735 | ChromeStatus.com 項目 | 規格

text-decoration-skip-ink: all

新增對 CSS text-decoration-skip-ink 屬性 all 值的支援。

text-decoration-skip-ink 屬性已支援 autononeall 值會將墨水跳過功能無條件套用至所有字形 (包括中日韓字元),而 auto 則不會跳過中日韓字元,因為墨水跳過功能通常會導致表意文字在一般底線位置產生不理想的視覺效果。

text-decoration-skip-ink: all,開發人員調整 text-underline-positiontext-underline-offset 以避免與中日韓文圖像衝突時,也可以明確選擇對這些字元啟用墨水跳過功能。

追蹤錯誤 #40675832 | ChromeStatus.com 項目 | 規格

dragEnterdragLeavedragOver 事件正確設定 dropEffect

拖曳規格要求 dataTransfer 的物件 dropEffect 屬性在 dragEnterdragOverdragLeave 上具有特定預先決定的值。拖曳輸入和拖曳覆寫應以目前的 effectAllowed 為依據,且 dragLeave 一律應有 none dropEffectdropEffect目前 Chromium 不會遵守這些規則。這項功能推出後,Chromium 就會開始遵守規格,並為這個屬性指派正確的值,方便網頁開發人員開始使用。

追蹤錯誤 #434151262 | ChromeStatus.com 項目 | 規格

拖曳開始時抑制指標事件

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

追蹤錯誤 #452372355 | ChromeStatus.com 項目 | 規格

功能

資訊清單本地化

支援資訊清單成員的本地化,因此應用程式可以根據使用者的語言和地區調整名稱、說明、圖示和快速鍵。開發人員會在網頁應用程式資訊清單中提供本地化值,瀏覽器會根據使用者的語言設定自動選取適當的資源,在不同市場中導入語言支援。

詳情請參閱「網頁應用程式資訊清單的本地化支援」。

追蹤錯誤 #380491647 | ChromeStatus.com 項目 | 規格

Android 網頁版

Android 版 Web Serial API

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

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

詳情請參閱 web.dev 上的 Web Serial API 指南Web Serial 規格

追蹤錯誤 #365514951 | ChromeStatus.com 項目

Android 上的 SharedWorker

長期以來,Android 裝置都停用了 SharedWorker,因為擔心其不可預測的程序生命週期。SharedWorker 執行個體可能會在未通知使用者或網頁開發人員的情況下意外終止。

不過,GitHub 上最近的討論 (請參閱 GitHub 討論) 顯示,SharedWorker 的程序生命週期難以預測,可能不像先前認為的那麼重要。因此,我們正在調查這個行為,以確保使用者享有穩定可靠的體驗,並根據調查結果在 Android 上重新啟用 SharedWorker。

追蹤錯誤 #40290702 | ChromeStatus.com 項目 | 規格

網站 API

WebGPU:linear_indexing 功能

這項功能會在瀏覽器首次出貨後,為 WebGPU 規格新增功能。

新增兩個運算著色器內建值,提升使用者生活品質。這些值會針對所有後端實作 (做為現有內建值的 Polyfill)。

追蹤錯誤 #482840564 | ChromeStatus.com 項目 | 規格

Web Authentication Immediate UI 模式

navigator.credentials.get() 的新模式,如果瀏覽器立即知道網站的密碼金鑰或密碼,就會向使用者顯示瀏覽器登入 UI,否則如果沒有這類憑證,就會以 NotAllowedError 拒絕 Promise。如果瀏覽器可提供可能成功的登入憑證選項,網站就能避免顯示登入頁面,同時仍允許傳統登入頁面流程,以因應沒有這類憑證的情況。

追蹤錯誤 #408002783 | ChromeStatus.com 項目 | 規格

取得安全付款確認功能

在付款要求中新增靜態方法,讓網頁開發人員取得瀏覽器實作安全付款確認的相關功能。

這有助於網頁開發人員瞭解安全付款確認功能有哪些可用功能,進而決定是否要搭配使用這些功能。

追蹤錯誤 #484043990 | ChromeStatus.com 項目 | 規格

延長生命週期的共用工作人員

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

追蹤錯誤 #400473072 | ChromeStatus.com 項目 | 規格

提示 API

網頁開發人員可透過 Prompt API 直接存取瀏覽器提供的裝置端 AI 語言模型。API 設計提供精細的控制項,與雲端 API 形狀一致,可逐步強化網站,並根據個別使用情境量身打造模型互動。這項功能可輔助以工作為基礎的語言模型 API (例如 Summarizer API),以及各種 API 和架構,以便使用開發人員提供的 ML 模型,在裝置端進行一般推論。

初始實作支援文字、圖片和音訊輸入。此外,回覆限制可確保生成的文字符合預先定義的規則運算式和 JSON 結構定義格式。

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

追蹤錯誤 #417526788 | ChromeStatus.com 項目 | 規格

網路和連線

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,並在其中實作這項規則。

追蹤錯誤 #40765949 | ChromeStatus.com 項目 | 規格

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

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

追蹤錯誤 #486562295 | ChromeStatus.com 項目 | 規格

成效

資源時間軸中的 ContentType

PerformanceResourceTiming 中新增 contentType 欄位,用來保存與擷取資源的 Content-Type HTTP 標頭對應的字串 (由伺服器傳回)。

追蹤錯誤 #1366706 | ChromeStatus.com 項目 | 規格

WebRTC Datachannel:一律協商資料管道

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

這表示:

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

會建立 SDP 中含有應用程式 m 行的提案,且:

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

會建立提案,在 SDP 中依序協商應用程式 m 行和音訊 m 行。

追蹤錯誤 #433898678 | ChromeStatus.com 項目 | 規格

新的來源試用

宣告式 CSS 模組指令碼

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

來源試用 | 追蹤錯誤 #448174611 | ChromeStatus.com 項目 | 規格

Container Timing API

容器時間 API 可監控 DOM 的註解區段何時顯示在畫面上,以及何時完成初始繪製。開發人員可以利用 containertiming 屬性標記 DOM 的子區段 (類似於 Element Timing API 的 elementtiming),並在該區段首次繪製時收到效能項目。開發人員可透過這項 API 測量網頁中各種元件的時間。

原始試用 | 追蹤錯誤 #382422286 | ChromeStatus.com 項目 | 規格

網頁應用程式 HTML 安裝元素

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

原始碼試用 | 追蹤錯誤 #454827186 | ChromeStatus.com 項目 | 規格

長動畫影格樣式時間長度

在 Long Animation Frame API 中新增 styleDurationforcedStyleDuration 資訊,讓開發人員區分樣式和版面配置時間。

Origin Trial | Tracking bug #476826067 | ChromeStatus.com entry | Spec

畫布中的 HTML

HTML-in-canvas 可讓您使用畫布自訂 HTML 的算繪作業,並提供三種新的基本元素:選擇加入畫布元素的屬性 (layoutsubtree)、繪製子元素的方法 (2d:drawElementImage、WebGL:texElementImage2D、WebGPU:copyElementImageToTexture),以及觸發以處理更新的繪製事件。

原始碼試用 | 追蹤錯誤 #500967896 | ChromeStatus.com 項目 | 規格

連線許可清單

連線允許清單功能可明確控管外部端點,限制從文件或工作人員使用 Fetch API 或其他網頁平台 API 啟動的連線。

建議的實作方式是透過 HTTP 回應標頭,從伺服器發布授權端點清單。使用者代理程式代表網頁建立任何連線前,會先根據這份許可清單評估目的地;系統會允許連線至已驗證的端點,但會封鎖與清單項目不符的連線。

來源試用 | 追蹤錯誤 #447954811 | ChromeStatus.com 項目 | 規格

Prompt API 抽樣參數

在 Prompt API 中新增取樣參數。這些參數會控制模型如何取樣詞元,讓開發人員控管輸出內容的「創意」或「隨機性」。此外,它還會將屬性新增至 LanguageModel 執行個體,以便讀取設定的值,以及新增靜態 LanguageModel 函式,以便取得這些參數的預設值和最大值。

第一個實作會新增 temperaturetopK 參數。

原始試用 | 追蹤錯誤 #496663356 | ChromeStatus.com 項目 | 規格

剖析 HTML 中的處理指令

處理指令 (語法:<?target data>) 是現有的 DOM 建構,在 XML 中公開,允許節點物件不是元素,但可能具有處理文件的某些語義意義。

舉例來說,這類屬性可用於標示串流或醒目顯示的範圍,不需要新的 DOM 元素,也不會變更 CSS 相關的 DOM 結構,或是做為 HTML 剖析器的指令,說明如何緩衝及串流。

追蹤錯誤 #481087638 | ChromeStatus.com 項目

OpaqueRange

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

這項功能可執行 getBoundingClientRect()getClientRects() 等作業,並與 CSS 自訂醒目顯示 API 整合,用於內嵌建議、醒目顯示和錨定彈出式視窗等 UI。這項功能只會公開值偏移,並傳回 nullstartContainerendContainer,因此不會公開 DOM 端點和內部結構,可確保封裝。

來源試用 | 追蹤錯誤 #421421332 | ChromeStatus.com 項目