全新 CSS 可視區域單元、Federated Credential Management API、Variable COLRv1 字型等等。
除非另有註明,否則以下說明異動適用於 Android、ChromeOS、Linux、macOS 和 Windows 的最新 Chrome Beta 版。您可以透過提供的連結或 ChromeStatus.com 上的清單進一步瞭解此處列出的功能。Chrome 108 已於 2022 年 10 月 27 日推出 Beta 版。你可以透過電腦前往 Google.com 或使用 Android 裝置前往 Google Play 商店下載最新版本。
CSS
Chrome 108 包含多項新的 CSS 功能。
遭取代元素的 CSS 溢位
Chrome 即將推出一項變更,允許開發人員將現有的 overflow
屬性替換為內容方塊外繪製的元素。可與 object-view-box
配對,建立套用自訂光暈或陰影的圖片,同時產生適當的墨水溢位行為,例如 CSS 陰影。
這是潛在的破壞性變更,詳情請參閱有關遭取代元素溢位的變更。
小、大型、動態和邏輯可視區域單元
此版本新增對小型 (svw
、svh
、svi
、svb
、svmin
、svmax
)、大型 (lvw
、lvh
、lvi
、lvb
、lvmin
、lvmax
)、動態 (dvw
、dvh
、dvi
、dvb
、dvmin
、dvmax
) 和邏輯 (vi
}、邏輯) 的支援。vb
}
CSS break-after
、break-before
和 break-inside
支援
支援在列印時避免 CSS 片段屬性 break-before
、break-after
和 break-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
Federated Credentials Management (原為 WebID)
Federated Credential Management API 可讓使用者透過聯合身分登入網站,並且提升瀏覽器隱私權。
工作站中的媒體來源擴充功能
允許從 DedicatedWorker 環境取得 Media Source Extensions (MSE) API 的使用,針對由 HTMLMediaElement 在主要視窗內容上的 HTMLMediaElement 播放,改善緩衝媒體的效能。在 DedicatedWorker 環境中建立 MediaSource 物件後,應用程式可以從中取得 MediaSourceHandle,並將該控制代碼傳輸到主執行緒,以用於附加到 HTMLMediaElement。建立 MediaSource 物件的結構定義之後,可能會用來緩衝媒體。
Sec-CH-Prefers-Reduced-Motion
使用者偏好媒體功能用戶端提示標頭
使用者偏好設定媒體功能用戶端提示標頭根據媒體查詢層級 5 的定義,針對使用者偏好設定媒體功能定義一組 HTTP 用戶端提示標頭。如果使用這些標頭做為關鍵用戶端提示,可讓伺服器針對 CSS 內嵌等項目做出明智的選擇。Sec-CH-Prefers-Reduced-Motion
會反映使用者的 prefers-reduced-motion
偏好設定。
WebTransport BYOB 讀取者
支援 WebTransport 的 BYOB(自備緩衝區) 讀取器,以便讀取開發人員提供的緩衝區。BYOB 讀取器可以盡量減少緩衝區複製,並減少記憶體配置。
權限政策來源中的萬用字元
權限政策規格定義的機制可讓開發人員選擇性啟用及停用各種瀏覽器功能和 API。此機制的其中一項功能,只允許對明確列舉的來源啟用功能,例如 https://foo.com/
。這項機制不夠靈活,無法滿足某些 CDN 的設計。這些 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 的這類變化版本。
傳送給 CSS @支援的 font-tech()
和 font-format()
條件額外資訊
將 font-tech()
和 font-format()
與 CSS @support 搭配使用,可偵測字型技術和格式支援,並循序漸進地增強內容。下列範例測試是否支援 COLRv1 字型。
@supports font-tech(color-COLRv1) {
}
@font-face src:
描述元中的 tech()
函式支援
CSS Fonts Level 4 可提供額外選取或篩選字型資源的方式。導入了 tech()
函式,可傳入此個別字型 blob 運作所需的字型技術。據此,使用者代理程式會選取第一個合適的資源。
Android 裝置上的 Chrome
Android OSK 現在預設會調整視覺可視區域的大小
Android 螢幕鍵盤預設會調整視覺可視區域的大小,而非調整包含區塊的初始大小。作者可以使用新的 interactive-widget
中繼檢視通訊埠鍵,選擇停用這項功能。
來源試用
這個版本的 Chrome 提供兩項新的來源試用功能。
canmakepayment
事件中的商家身分
canmakepayment
Service Worker 事件會通知商家使用者是否在已安裝的付款應用程式中登錄卡片。並將商家的來源和任意資料從付款應用程式來源傳遞至 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.defaultStatus
和 window.defaultstatus
這些非標準 API 並非由所有瀏覽器實作,因此對瀏覽器行為沒有影響。這麼做可以清理感應器,並移除潛在的數位指紋採集信號。
他們原本用來修改/控制「狀態列」。不過,這些標記並未實際影響 Chrome 狀態列,也不是標準化屬性。Gecko 自 23 版起不再支援這些屬性;WebKit 仍然支援這些屬性。相關的 window.status
屬性「已」標準化,但也不得對視窗狀態列產生影響。
移除
這個版本的 Chrome 移除了 4 項功能。
移除「ImageDecoderInit.premultiplyAlpha
」
這項功能在主要用途上沒有可觀察的效果,但可能會使實作項目受限,無法達到最佳效果。如需更詳盡的說明,請參閱這個問題。依據 WebCodecs 規格編輯器的共識和缺乏使用 (M106 中每次使用計數器的 0.000000339% - 0.00000687% 的頁面載入次數)。
移除「navigateEvent.restoreScroll()
」
「restoreScroll()
」已由「navigateEvent.scroll()
」取代。scroll()
的運作方式相同,但前者允許開發人員控制非反向導覽的捲動時間 (scroll()
適用於捲動並非還原作業的情況,因此會隨行為變更而變更名稱)。
移除「navigateEvent.transitionWhile()
」
由於開發人員回報的設計瑕疵,因此 transitionWhile()
已從 navigateEvent.intercept()
取代。攔截() 的行為與 transformwhile() 幾乎相同,但不是採用必要的 Promise 參數,而是採用會傳回 Promise 的選用處理常式函式。這會讓瀏覽器控制處理常式執行的時機,也就是比 transitionWhile()
更直覺也更直覺化。
移除 WebRTC mediaConstraint 的 googIPv6
"googIPv6: false"
可用於停用 WebRTC 的 IPv6 支援,如以下範例所示。
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
系統多年來預設已啟用 IPv6,因此無法停用。規格中沒有這個舊版 API。