新的 CSS 顏色類型和色彩空間、CSS 三角函式,以及 View Transitions API。
除非另有說明,否則下列變更適用於 Android、ChromeOS、Linux、macOS 和 Windows 最新版 Chrome 測試版。如要進一步瞭解這裡列出的功能,請點選提供的連結,或參閱 ChromeStatus.com 的清單。Chrome 111 為 2023 年 2 月 9 日的 Beta 版。你可以前往 Google.com 的電腦版網站或 Android 版 Google Play 商店下載最新版。
CSS
新的 CSS 顏色類型和空間
CSS 色彩等級 4 中所述的所有功能現已啟用。這包括四種裝置獨立的顏色類型 (Lab、Oklab、lch 和 Oklch)、color()
函式,以及用於漸層和動畫的使用者定義色彩空間。
請參閱高解析度 CSS 顏色指南,瞭解這些新的顏色類型和色彩空間。
color-mix()
函式
CSS Color 5 中非常實用的 color-mix()
函式也已推出。這個函式可在任何支援的色彩空間中,將某種顏色的百分比混合到另一種顏色。以下範例會將 10% 的 blue
混合至 SRGB 中的 white
。
.item {
background-color: color-mix(in srgb, blue 10%, white);
}
CSS 選取器 4 擬造類別::nth-child(an + b of S)
擴充 :nth-child(an + b)
和 :nth-last-child()
以取得選取器。例如 :nth-child(3 of .c)
是特定父項下的第三個 .c
。詳情請參閱「使用 of S
語法進一步控管 :nth-child()
選項」一文。
CSS 根字型單位
將根字型單位 rex
、rch
、ric
和 rlh
新增至現有的 rem
根字型單位。
CSS 三角函數
三角函式 sin()
、cos()
、tan()
、asin()
、acos()
、atan()
、atan2()
已新增至 CSS 數學運算式。
為 CSS 自訂屬性設定容器查詢樣式
將 style()
函式新增至 @container
規則,以便根據祖系元素的自訂屬性計算值套用樣式。
baseline-source
屬性
baseline-source
屬性可讓網頁開發人員指定內嵌式方塊應使用 first
還是 last
基準線,以便在 linebox 內對齊。
網站 API
window-management
權限和權限政策字串
Chrome 111 新增 window-management
做為 window-placement
權限和權限政策字串的別名。這項計畫是為了最終淘汰並移除 window-placement
,進而重新命名字串。隨著 Window Management API 隨著時間演進,這個用語變更可延長描述子的壽命。
Media Session API:投影片操作
將 previousslide
和 nextslide
動作新增至現有的 Media Session API。
可調整大小的 ArrayBuffer
和可擴充的 SharedArrayBuffer
擴充 ArrayBuffer
建構函式,以便採用額外的最大長度,允許緩衝區原地擴增及縮減。同樣地,SharedArrayBuffer
會延伸至額外的長度上限,以便在原地進行擴充。
推測規則:參照來源政策鍵
這項功能可擴充推測規則語法,讓開發人員指定要與推測規則觸發的推測要求搭配使用的參照來源政策。這也重新引進「充分嚴格的參照來源政策」規定。
串流式宣告式 Shadow DOM
這項功能會在開啟的範本標記 (而非結束的範本標記) 上附加陰影根,進而支援串流功能。
View Transitions API
透過快照檢視畫面,並允許 DOM 變更,在不造成狀態重疊的情況下,在單頁應用程式 (SPA) 中建立精緻的轉場效果。您可以使用 View Transitions 建立自訂轉場效果,也可以使用簡單的預設交叉淡出效果,提升使用者體驗。
請參閱 Chrome 開發人員文章,進一步瞭解轉場效果,並參考相關範例。
WebRTC 可擴充的視訊編碼擴充功能
這個擴充功能會定義標準方法,用於在傳出 WebRTC 影片音軌時,選擇可用的可調整式視訊編碼 (SVC) 設定。
WebXR enabledFeatures
屬性
傳回 XRSessionInit
為此 XRSession
啟用的功能組合,以及規格針對指定模式和功能所需的隱含功能。對於已授予的工作階段,這會包含所有 requiredFeatures
,但可能只是 optionalFeatures
的子集。大多數功能都有其他方法可用來偵測是否已授予許可,但對於某些功能而言,系統是否已啟用功能的信號,可能與功能目前無法使用的資料密切相關,而非資料永遠無法使用。您可以查詢 enabledFeatures
,判斷是否應顯示任何實用提示 (例如改善或開始追蹤),或是在目前的工作階段中永遠不會支援某項功能。
正在進行的來源試用
在 Chrome 111 中,您可以選擇參與下列新的來源試用。
淘汰 Web Payment API 中 connect-src
CSP 旁路的試驗
淘汰 Web Payment API 在擷取資訊清單時,略過 connect-src CSP 政策的功能。淘汰後,網站的 connect-src CSP 政策必須允許 PaymentRequest 呼叫中指定的付款方式網址,以及方法鏈結擷取其資訊清單的任何其他網址。
針對需要暫時重新啟用這項功能的開發人員,Chrome 111 版已移除這項略過功能,並在 111 到 113 版中進行反向來源測試。如要選擇加入,請註冊connect-src
CSP Bypass 的反淘汰試用方案。
文件子母畫面
Document Picture-in-Picture API 是新的 API,可開啟一律置頂的視窗,並填入任意 HTML 內容。這項功能是現有子母畫面 API 的擴充功能,該 API 只允許將 HTMLVideoElement 放入子母畫面視窗。這可讓網頁開發人員為使用者提供更優質的 PiP 體驗。
參閱文件 Picture-in-Picture 說明文件。
註冊文件子母畫面來源試用。
淘汰和移除
這個版本的 Chrome 會淘汰及移除下列項目。請造訪 ChromeStatus.com,查看已淘汰、目前淘汰和先前淘汰的功能清單。
這個版本的 Chrome 移除了三項功能。
移除 PaymentInstruments
PaymentInstruments 是支援非即時安裝付款應用程式的網路 API (請參閱 https://w3c.github.io/payment-handler/)。這項功能的設計假設瀏覽器會儲存實際的付款工具詳細資料,但實際上並非如此,且存在某些隱私權外洩問題。這項功能也未在任何其他瀏覽器上推出,我們也未發現其他瀏覽器供應商對這項功能有興趣。因此,這個 API 已淘汰並移除。
移除 Web Payment API 中的 connect-src
CSP 旁路
已淘汰 Web Payment API 在擷取資訊清單時,略過 connect-src
CSP 政策的功能。移除後,網站的 connect-src
CSP 政策就必須允許 PaymentRequest 呼叫中指定的付款方式網址,以及方法鏈結擷取其資訊清單的任何其他網址。
如要瞭解如何選擇採用淘汰前測試,請參閱「原始版本測試」下方的資訊,這可讓您有更多時間進行這項移除作業所需的變更。
canmakepayment
事件中的商家身分
canmakepayment
服務工作者事件可讓商家瞭解使用者是否在已安裝的付款應用程式中登錄信用卡。這項事件會從付款應用程式來源,將商家的來源和任意資料悄悄傳遞給服務工作者。這項跨來源通訊發生在 JavaScript 中的 PaymentRequest 建構作業,不需要使用者手勢,也不會顯示任何使用者介面。這項靜默資料傳遞功能已從 canmakepayment
事件和 Android IS_READY_TO_PAY
Intent 中移除。