Chrome 133 開發人員預覽版

發布日期:2024 年 1 月 15 日

除非另有說明,否則下列變更適用於 Android、ChromeOS、Linux、macOS 和 Windows 的最新 Chrome Beta 版。如要進一步瞭解這裡列出的功能,請點選提供的連結,或前往 ChromeStatus.com 查看清單。Chrome 133 版於 2024 年 1 月 15 日推出 Beta 版。你可以前往 Google.com 下載電腦版,或前往 Android 的 Google Play 商店下載最新版。

CSS 和 UI

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

CSS 進階attr()函式

實作 CSS Level 5 中指定的 attr() 擴增功能,除了 <string> 之外,還允許其他型別,並可在所有 CSS 屬性中使用 (除了現有對虛擬元素 content 的支援之外)。

詳情請參閱「CSS attr() 升級」一文。

CSS :open 虛擬類別

:open 偽類別會在 <dialog><details> 處於開啟狀態時比對兩者,並在 <select><input> 處於有挑選器且挑選器顯示的模式時比對兩者。

CSS 捲動狀態容器查詢

使用容器查詢,根據容器的捲動狀態設定後代容器的樣式。

查詢容器可以是捲動容器,也可以是受捲動容器捲動位置影響的元素。您可以查詢下列狀態:

  • stuck:固定位置的容器會固定在捲動方塊的其中一個邊緣。
  • snapped:捲動貼齊容器目前已水平或垂直貼齊。
  • scrollable:查詢方向的捲動容器是否可以捲動。

新的 container-type: scroll-state 可讓容器查詢。

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child {
    font-size: 75%;
  }
}

詳情請參閱 CSS scroll-state()

CSS text-boxtext-box-trimtext-box-edge

如要達到最佳的文字內容平衡,請使用 text-box-trimtext-box-edge 屬性,以及 text-box 簡寫屬性,更精細地控制文字的垂直對齊方式。

text-box-trim 屬性會指定要修剪的邊,上方或下方,而 text-box-edge 屬性則會指定修剪邊緣的方式。

這些屬性可讓您使用字型指標精確控制垂直間距。詳情請參閱 CSS text-box-trim

popover 屬性的 hint

Popover API 會指定 popover 屬性兩個值 (automanual) 的行為。這項功能說明第三個值 popover=hint。提示通常與「工具提示」類型的行為相關聯,但行為略有不同。主要差異在於開啟巢狀彈出式視窗堆疊時,hint 會從屬於 auto。因此,現有的一疊 auto 彈出式視窗保持開啟時,可以開啟不相關的 hint 彈出式視窗。

標準範例是開啟 <select> 挑選器 (popover=auto),並顯示懸停觸發的工具提示 (popover=hint)。該動作不會關閉 <select> 挑選器。

改良彈出式視窗呼叫器和錨點位置

新增必要方式,透過 popover.showPopover({source}) 設定快顯視窗之間的呼叫端關係。允許呼叫端關係建立隱含錨點元素參照。

不應重新叫用叫用器內部的快顯視窗

在下列情況中,按一下按鈕會正確啟用彈出式視窗,但之後按一下彈出式視窗本身不應關閉彈出式視窗。

<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>

先前發生這種情況,是因為彈出式視窗點擊會泡泡至 <button> 並啟動呼叫器,進而切換彈出式視窗關閉。現在已改為預期行為。

網站 API

Animation.overallProgress

無論時間軸的性質為何,開發人員都能透過這個屬性,以一致且方便的方式瞭解動畫在各個疊代中推進的程度。如果沒有 overallProgress 屬性,您需要手動計算動畫的進度,並考量動畫的疊代次數,以及動畫的 currentTime 是否為總時間的百分比 (如捲動驅動動畫),或是絕對時間量 (如時間驅動動畫)。

Atomics 物件的 pause() 方法

pause() 方法新增至 Atomics 命名空間物件,向 CPU 提示目前程式碼正在執行自旋鎖。

指令碼的 CSP 雜湊值回報

複雜的網頁應用程式通常需要追蹤下載的子資源,以確保安全性。

具體來說,即將推出的業界標準和最佳做法 (例如 PCI-DSS v4) 要求網頁應用程式保留所有下載及執行的指令碼清單。

這項功能以 CSP 和 Reporting API 為基礎,回報文件載入的所有指令碼資源的網址和雜湊 (適用於 CORS/同源)。

保留 DOM 狀態的移動

新增 DOM 基本體 (Node.prototype.moveBefore),可讓您在 DOM 樹狀結構中移動元素,不必重設元素狀態。

如果移動而非移除及插入,系統會保留下列狀態:

  • <iframe> 元素仍會載入。
  • 有效元素仍會保持焦點。
  • 彈出式視窗、全螢幕和互動式對話方塊會保持開啟狀態。
  • CSS 轉場效果和動畫會繼續。

<area> 上公開 attributionsrc 屬性

即使未公開,也會將 <area>attributionsrc 屬性的曝光與屬性的現有處理行為對齊。

此外,在 <area> 上支援這項屬性也很合理,因為該元素是頂層導覽介面,且 Chrome 已在 <a>window.open 的其他介面上支援這項屬性。

在元素時間和 LCP 中公開粗略的跨來源 renderTime (不論 Timing-Allow-Origin 為何)

元素時間和 LCP 項目都有 renderTime 屬性,與圖片或文字繪製的第一個影格對齊。

目前,這項屬性會對跨來源圖片進行防護,方法是在圖片資源中加入 Timing-Allow-Origin 標頭。不過,這項限制很容易規避 (例如在同一個影格中顯示同源和跨源圖片)。

由於這項限制造成混淆,我們計畫移除這項限制,並在文件未跨來源隔離時,將所有算繪時間調慢 4 毫秒。這項資訊的精細程度似乎不足以洩漏任何實用的跨來源圖片解碼時間資訊。

還原 responseStart 並導入 firstResponseHeadersStart

啟用 103 Early Hints 後,回應會包含兩個時間戳記:

  • 收到 Early Hints (103) 時
  • 收到最終標頭 (例如 200) 時

Chrome 115 推出時 firstInterimResponseStart ,我們也變更了 responseStart (用於首位元組時間 (TTFB)) 的意義,改為「最終標頭」,以便測量這兩個時間戳記。這項變更導致瀏覽器和工具出現網頁相容性問題,因為這些瀏覽器和工具並未對這項常用指標進行類似變更。

Chrome 133 會還原這項 responseStart 變更,解決相容性問題,並導入 firstResponseHeadersStart,讓網站能測量最終標頭的時間,同時保留 TTFB 的原始定義。

FileSystemObserver 介面

FileSystemObserver 介面會將檔案系統的變更通知網站。網站會監控使用者先前授予權限的檔案和目錄變更,這些檔案和目錄位於使用者的本機裝置或 Bucket 檔案系統 (也稱為 Origin Private File System),並收到基本變更資訊通知,例如變更類型。

在節能模式下凍結

啟用節能模式後,如果「瀏覽內容群組」已隱藏且閒置超過五分鐘,且其中任何子群組的同源頁框超出 CPU 使用率門檻,Chrome 就會凍結該群組,但有下列情況除外:

  • 提供音訊或視訊會議功能 (透過識別麥克風、相機或螢幕/視窗/分頁擷取,或是具有「開啟」RTCDataChannel 或「即時」MediaStreamTrack 的 RTCPeerConnection 偵測)。
  • 控制外部裝置 (透過 WebUSB、Web Bluetooth、WebHID 或 Web Serial 偵測到)。
  • 保留 Web Lock 或 IndexedDB 連線,以封鎖版本更新或不同連線上的交易。

凍結是指暫停執行作業。Page Lifecycle API 中正式定義了這個概念。

系統會校準 CPU 使用量門檻,在節能模式啟動時凍結約 10% 的背景分頁。

多個匯入對應

目前匯入對應檔必須在任何 ES 模組之前載入,且每個文件只能有一個匯入對應檔。這會導致這些模組變得脆弱,且在實際情境中可能難以使用:任何在這些模組之前載入的模組都會導致整個應用程式中斷,而在模組眾多的應用程式中,這些模組會成為大型封鎖資源,因為系統必須先載入所有可能模組的完整地圖。

這項功能會以一致且具決定性的方式合併匯入對應表,讓每個文件有多個匯入對應表。

儲存空間存取標頭

提供替代方式,讓已驗證的嵌入內容選擇加入未經分割的 Cookie。這些標頭會指出特定網路要求是否 (或是否可以) 包含未經分割的 Cookie,並允許伺服器啟用已授予的「storage-access」權限。提供啟用「storage-access」權限的替代方式,可讓非 iframe 資源使用這項權限,並減少已驗證嵌入內容的延遲時間。

支援使用 Promise<DOMString> 建立 ClipboardItem

非同步剪貼簿 write() 方法的輸入內容 ClipboardItem 現在除了 Blob 之外,還接受建構函式中的字串值。ClipboardItemData 可以是 Blob、字串,或解析為 Blob 或字串的 Promise。

WebAssembly Memory64

memory64 提案新增對線性 WebAssembly 記憶體的支援,大小超過 2^32 位元。這項指令不會提供新指令,而是擴充現有指令,允許記憶體和資料表使用 64 位元索引。

Web Authentication API:PublicKeyCredential getClientCapabilities() 方法

PublicKeyCredential getClientCapabilities() 方法可讓您判斷使用者用戶端支援哪些 WebAuthn 功能。這個方法會傳回支援的功能清單,讓開發人員根據用戶端的特定功能,調整驗證體驗和工作流程。

WebGPU:1 元件頂點格式 (和 unorm8x4-bgra)

由於缺乏支援或舊版 macOS (任何瀏覽器都不再支援),WebGPU 的初始版本中沒有其他頂點格式。應用程式先前必須要求至少兩倍的 8 位元和 16 位元資料類型,現在只要使用 1 元件頂點格式,就能只要求必要的資料。unorm8x4-bgra 格式可讓您更輕鬆地載入 BGRA 編碼的頂點顏色,同時保留相同的著色器。

Web Cryptography API 的 X25519 演算法

「X25519」演算法提供工具,可使用 [RFC7748] 中指定的 X25519 函式執行金鑰協議。「X25519」演算法 ID 可在 SubtleCrypto 介面中用於存取已實作的作業:generateKey、importKey、exportKey、deriveKey 和 deriveBits。

新的來源試用

在 Chrome 133 中,您可以選擇加入下列新的原始碼試用計畫

選擇停用節能模式下的凍結功能

這項停用試用功能可讓網站停用 Chrome 133 版的節能模式凍結行為。

淘汰與移除

這個版本的 Chrome 會淘汰及移除下列項目。 如要查看計畫淘汰、目前淘汰和先前移除的項目清單,請前往 ChromeStatus.com。

這個版本的 Chrome 會淘汰一項功能。

淘汰 WebGPU maxInterStageShaderComponents 限制

由於多種因素,maxInterStageShaderComponents limit 已淘汰。預計在 Chrome 135 版中移除。

  • maxInterStageShaderVariables 的冗餘:這個限制已達到類似目的,可控管在著色器階段之間傳遞的資料量。
  • 微小差異:雖然這兩種限制的計算方式略有不同,但差異不大,且可在 maxInterStageShaderVariables 限制內有效管理。
  • 簡化:移除 maxInterStageShaderComponents 可簡化著色器介面,並降低開發人員的複雜度。不必再管理兩個有細微差異的獨立限制,而是專注於名稱更適當且更全面的 maxInterStageShaderVariables

這個版本的 Chrome 移除了兩項功能。

先前使用 <link rel=prefetch> 預先擷取資源時,Chrome 會忽略前五分鐘內首次使用的快取語意 (即 max-ageno-cache),避免重新擷取。現在 Chrome 會移除這個特殊情況,並使用正常的 HTTP 快取語意。

也就是說,網頁開發人員必須加入適當的快取標頭 (Cache-Control 或 Expires),才能享有 <link rel=prefetch> 的優點。

這也會影響非標準 <link rel=prerender>

移除 Chrome 歡迎頁面觸發程序,並使用初始偏好設定首次執行分頁

initial_preferences 檔案的 first_run_tabs 屬性中加入 chrome://welcome,現在不會有任何效果。由於該頁面與在電腦平台觸發的首次執行體驗重複,因此已移除。