Chrome 108 Beta 版

新增 CSS 可視區域單元、Federated Credential Management API、可變的 COLRv1 字型等。

除非另有說明,否則以下所述的變更會套用到 Android、ChromeOS、Linux、macOS 和 Windows 的最新 Chrome Beta 版測試版本。透過提供的連結或 ChromeStatus.com 上的清單,進一步瞭解這裡列出的功能。Chrome 108 目前為 Beta 版,時間為 2022 年 10 月 27 日。你可以透過電腦前往 Google.com 下載最新版本,也可以透過 Android 裝置前往 Google Play 商店下載最新版本。

CSS

Chrome 108 提供多項新的 CSS 功能。

已取代元素的 CSS 溢位

Chrome 將開始推出變更,讓開發人員使用現有的 overflow 屬性,取代在內容方塊外繪製的已取代元素。搭配 object-view-box 使用,可用來建立套用自訂光暈或陰影的圖片,和 CSS 陰影等適當的墨水溢位行為一樣。

這是一項潛在的破壞性變更,詳情請參閱「已取代元素溢位的異動」一文。

小型、大型、動態和邏輯可視區域單元

這會新增對小 (svwsvhsvisvbsvminsvmax)、大型 (lvwlvhlvilvblvminlvmax)、動態 (dvwdvhdvidvbdvmindvmax) 和邏輯單位 (vi、}) 的支援。vb

CSS break-afterbreak-beforebreak-inside 支援

支援在列印時避免 CSS 片段化屬性 break-beforebreak-afterbreak-inside 的值。這個值會指示瀏覽器避免在套用該元素的元素之前、之後或內部出現中斷情形。舉例來說,下列 CSS 供應商可避免圖表遭到分頁符號毀損,

figure {
    break-inside: avoid;
}

在 Chrome 108 中新增對 LayoutNG 列印支援功能,已新增此功能。

最後一個基準項目對齊方式

這項功能可讓開發人員依最後的基準 (而非第一個基準) 對齊彈性或格線版面配置中的項目。方法是透過下列屬性完成:

  • align-items: last baseline;
  • justify-items: last baseline;
  • align-self: last baseline;
  • justify-self: last baseline;

ContentVisibilityAutoStateChanged 個事件

當元素呈現狀態因任何建立與使用者相關的元素的屬性而變更時,使用 content-visibility: auto 讓元素觸發的事件。

這種做法的用途是讓開發人員進一步控制何時停止或開始轉譯,以便回應使用者代理程式停止或開始轉譯內容顯示子樹狀結構。例如,開發人員可能想停止使用者代理程式不在子樹狀結構中的 React 更新。同樣地,當使用者代理程式未轉譯元素時,開發人員可能需要停止任何其他指令碼更新 (例如畫布更新)。

網站 API

聯合憑證管理 (舊稱 WebID)

Federated Credential Management API 可讓使用者將自己的聯合身分登入網站,過程同時改進瀏覽器隱私權。

工作站中的媒體來源擴充功能

啟用來自專屬 Worker 內容的 Media Source Extensions (MSE) API,藉此提高在主要 Window 環境中 HTMLMediaElement 播放的緩衝媒體效能。藉由在 uniqueWorker 結構定義上建立 MediaSource 物件,應用程式可能會從自身內容取得 MediaSourceHandle,並將該處理常式移轉至主執行緒,以便附加至 HTMLMediaElement。建立 MediaSource 物件的結構定義後,就可以使用該物件來緩衝媒體。

Sec-CH-Prefers-Reduced-Motion 使用者偏好設定媒體功能用戶端提示標頭

「使用者偏好設定媒體功能用戶端提示標頭」定義了一組 HTTP 用戶端提示標頭,並以「媒體查詢層級 5」定義的方式,規範使用者偏好媒體功能。做為「重要用戶端提示」使用時,這些標頭可讓伺服器做出明智的選項 (例如 CSS 內嵌)。Sec-CH-Prefers-Reduced-Motion 會反映使用者的 prefers-reduced-motion 偏好設定。

WebTransport BYOB 讀取器

支援 WebTransport 的 BYOB(自備緩衝區) 讀取器,允許讀取開發人員提供的緩衝區。BYOB 讀取器可盡量減少緩衝區複製作業,並減少記憶體配置。

權限政策來源中的萬用字元

權限政策規格所定義的機制可讓開發人員選擇性地啟用或停用各種瀏覽器功能和 API。這項機制的其中一項功能就是只在明確列舉來源 (例如 https://foo.com/) 上啟用相關功能。這項機制無法足夠設計部分 CDN 的設計,也就是透過可能託管於數百個可能子網域中的來源來傳遞內容。

因此,這項功能在權限政策 (例如 SCHEME://*.HOST:PORT (例如 https://*.foo.com/)) 中支援萬用字元。如果有效來源可以透過 SCHEME://HOST:PORT 建構 (例如 https://foo.com/),就必須將 HOST 做為可註冊的網域。也就是說,https://*.bar.foo.com/ 可以正常運作,但 https://*.com/ 無法 (如要允許所有網域使用這項功能,請委派給 *)。

File System Access API 中的 AccessHandle 同步處理方法

將 File System Access API 中 FileSystemSyncAccessHandle 中的非同步方法 flush()getSize()truncate() 更新為同步方法。「FileSystemSyncAccessHandle」目前混用同步處理和非同步的方法,使得效能和可用性受到影響,尤其是將 C/C++ 移植到 Wasm 的應用程式。本次更新將提升 API 用量的一致性,並改善 Wasm 型程式庫的效能。

這是一項潛在的破壞性變更,請參閱「破壞性變更:AccessHandle 的同步方法」一文。

WebAuthn 條件式 UI

Windows 22H2 以上版本、macOS 和 Android P 以上版本支援 WebAuthn 的條件式 UI。此外,電腦平台上的 WebAuthn UI 也已一併更新。

變數 COLRv1 字型和字型功能偵測

COLRv1 變數字型支援

Chrome 第 98 版起已支援 COLRv1 色彩向量字型,但這個初始版本僅支援 COLRv1 表格的靜態功能。COLRv1 規格定義了與 OpenType Variations 的整合,可讓您透過變更可變軸參數的方式,修改漸層的字型屬性及轉換。第二個步驟將支援 COLRv1 對這類變化版本。

font-tech()font-format() 條件擴充功能傳送給 CSS @supports

font-tech()font-format() 與 CSS @support 搭配使用,可偵測字型技術和格式支援,並逐步強化內容。下列範例測試是否支援 COLRv1 字型

@supports font-tech(color-COLRv1) {

}

@font-face src: 描述元中的 tech() 函式支援

CSS 字型層級 4 提供更多選取或篩選字型資源的方法。導入 tech() 函式,可傳遞該字型 blob 運作所需的字型技術清單。使用者代理程式將根據這項資訊選擇第一個合適的資源。

Android 裝置上的 Chrome

Android OSK 現在預設會調整可視區域大小

Android 螢幕小鍵盤預設會調整可視區域的大小,而非初始包含區塊的初始大小。作者可以使用新的 interactive-widget 中繼可視區域金鑰,選擇停用這項設定。

來源試用

這個版本的 Chrome 提供兩項全新的來源試用

canmakepayment 個事件中的商家身分

canmakepayment Service Worker 事件可讓商家瞭解使用者在已安裝的付款應用程式中是否有已登錄的卡片。在無訊息的情況下,付款應用程式來源會將商家的來源和任意資料傳送給服務供應商。這項跨來源通訊是在 JavaScript 中建構 PaymentRequest 時進行,不需要使用者手勢,而且不會顯示任何使用者介面。如要從「canmakepayment」事件移除身分欄位,可以透過 chrome://flags/#clear-identity-in-can-make-payment 啟用開發人員試用功能。啟用這個旗標後,「canmakepayment」事件 (和 Android IS_READY_TO_PAY 意圖) 中的身分欄位會留空。

詳情請參閱 Payment Handler API 的 CanMakePayment 事件行為更新

往返快取 NotRestoredReason API

NotRestoredReason API 會透過 PerformanceNavigationTiming API,在頁框樹狀結構中的 BFcache 回報網頁未提供的原因清單。

網頁可能會因 BFcache 封鎖,原因有很多種,例如規格要求的原因,以及瀏覽器導入方式的具體原因。開發人員可以使用 pageshow 處理常式保留參數和 PerformanceNavigationTiming.type(back-forward),在自家網站上收集 BFCache 的命中率。這個 API 可讓網站收集資訊,瞭解為何在記錄導覽中不使用 BFCache,如此一來,網站便能根據個別原因採取行動,並讓網頁與 BFCache 相容。

淘汰和移除

這個版本的 Chrome 推出了下列淘汰和移除功能。請造訪 ChromeStatus.com,查看預定淘汰事項、目前淘汰功能以及先前移除項目的清單。

淘汰項目

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

淘汰並移除 window.defaultStatuswindow.defaultstatus

這些非標準 API 並非由所有瀏覽器實作,且對瀏覽器行為沒有影響。這麼做會清理乾淨、移除潛在的指紋訊號。

它們原本用於修改/控制瀏覽器視窗底部的「狀態列」文字,不過,這類政策並未對 Chrome 的狀態列產生任何實際影響,也不是標準化屬性。自 Gecko 第 23 版起便不支援這些屬性,WebKit 仍然支援這些屬性。相關的 window.status 屬性標準化,但一律不得對視窗狀態列造成影響

移除

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

移除「ImageDecoderInit.premultiplyAlpha

在主要用途中,這項功能沒有任何可觀察的影響,但可能會限制實作成效不彰。如需更多詳細說明,請參閱這個問題。根據 WebCodecs 規格編輯器的共識,缺乏使用率 (在 M106 中,每次使用計數器的頁面載入速度佔 0.000000339% - 0.00000687%)。

移除「navigateEvent.restoreScroll()

restoreScroll() 將由 navigateEvent.scroll() 取代。scroll() 的運作方式相同,但其允許開發人員控制非掃遍導覽的捲動時間 (scroll() 可在捲動不還原時運作,因此名稱會隨著行為變更而改變)。

移除「navigateEvent.transitionWhile()

由於開發人員回報的設計瑕疵,現已由 navigateEvent.intercept() 取代 transitionWhile()。intercept() 的行為與 transformAt() 幾乎相同,但會採用可傳回 Promise 的選用處理常式函式,而非採用必要的 Promise 參數。這樣一來,瀏覽器就能控制處理常式的執行時機,比 transitionWhile() 更好且更直覺化。

移除 WebRTC mediaConstraint 的 googIPv6

"googIPv6: false" 可用來停用 WebRTC 中的 IPv6 支援,如以下範例所示。

new RTCPeerConnection({}, {mandatory:{googIPv6:false}});

IPv6 已預設啟用多年,我們無法停用。規格中不存在這個舊版 API。