Chrome 133 開發人員預覽版

發布日期:2024 年 1 月 15 日

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

CSS 和 UI

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

CSS 進階 attr() 函式

實作 CSS 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 提示目前的程式碼正在執行 spinlock。

指令碼的 CSP 雜湊值回報

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

特別是,即將推出的業界標準和最佳做法 (例如 PCI-DSS 4.0) 要求網路應用程式保留所有下載及執行的腳本清單。

這項功能會建構 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 後,回應會有兩個時間戳記:

  • 早期提示到達時 (103)
  • 最終標頭到達時 (例如 200)

當 Chrome 115 推出 firstInterimResponseStart 以便評估這兩個時間戳記時,我們也將 responseStart 的含義 (由 Time to First Byte (TTFB) 使用) 改為「最終標頭」。這會導致瀏覽器和工具無法針對這項常用指標做出類似變更,進而造成網頁相容性問題。

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

FileSystemObserver 介面

FileSystemObserver 介面會通知網站檔案系統的變更。網站會在使用者的本機裝置或 Bucket 檔案系統 (也稱為 Origin 私人檔案系統) 中,觀察使用者先前已授予權限的檔案和目錄變更,並收到基本變更資訊的通知,例如變更類型。

在節能模式下凍結

當省電模式啟用時,如果其中任何同源框架的子群組超過 CPU 使用量門檻,Chrome 就會凍結已隱藏且靜默超過五分鐘的「瀏覽內容群組」,除非:

  • 提供音訊或視訊會議功能 (透過識別麥克風、攝影機或螢幕/視窗/分頁擷取畫面,或具有「open」RTCDataChannel 或「live」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

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

WebAssembly Memory64

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

Web Authentication API:PublicKeyCredential getClientCapabilities() 方法

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

WebGPU:1 個元件的頂點格式 (以及 unorm8x4-bgra)

新增 WebGPU 初始版本中因缺乏支援或舊版 macOS (已不再受任何瀏覽器支援) 而未提供的額外頂點格式。1 個元件的頂點格式可讓應用程式只要求必要資料,而過去在 8 位元和 16 位元資料類型中,應用程式必須要求至少兩倍的資料。使用 unorm8x4-bgra 格式時,您可以同時保留相同的著色器,稍微更方便地載入 BGRA 編碼的頂點顏色。

Web Cryptography API 的 X25519 演算法

「X25519」演算法提供工具,可使用 [RFC7748] 中指定的 X25519 函式執行金鑰協議。在 SubtleCrypto 介面中,您可以使用「X25519」演算法 ID 存取已實作的作業: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 現在不會產生任何效果。我們移除了這個頁面,因為在電腦平台上觸發的初次執行體驗,已取代了這個頁面。