新增 CSS 顏色類型和色域、CSS 三角函數和 View Transitions API。
除非另有註明,否則下列變更將適用於 Android、ChromeOS、Linux、macOS 和 Windows 平台的最新 Chrome Beta 版。透過提供的連結或 ChromeStatus.com 上的清單,進一步瞭解這裡列出的功能。Chrome 111 為 Beta 版,截至 2023 年 2 月 9 日為止。你可以透過電腦前往 Google.com 下載最新版本,也可以透過 Android 裝置前往 Google Play 商店下載最新版本。
CSS
新的 CSS 顏色類型和空格
CSS 顏色等級 4 中所述的所有功能現已啟用。這包括四種獨立裝置的顏色類型 (lab、Oklab、lch 和 Oklch)、color()
函式,以及使用者為漸層和動畫定義的色域。
如要瞭解這些新的顏色類型和空格,請參閱高畫質 CSS 色彩指南。
color-mix()
函式
另外,CSS 顏色 5 提供的 color-mix()
函式也非常實用。這個函式可讓您在任何支援的色域中,將某個百分比的顏色混合到另一個顏色中。以下範例將 10% 的 blue
混合到 SRGB 中的 white
。
.item {
background-color: color-mix(in srgb, blue 10%, white);
}
CSS 選取器 4 虛擬類別 :nth-child(an + b/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 三角函式
CSS 數學運算式新增了三角函式 sin()
、cos()
、tan()
、asin()
、acos()
、atan()
、atan2()
。
為 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
也延長至額外的長度上限,並允許就地成長。
推測規則:參照政策金鑰
這會擴充推測規則語法,可讓開發人員指定參照網址政策,以便搭配推測規則觸發的推測要求使用。這也再次加入了「充分嚴格參照網址政策」的規定。
串流宣告式陰影 DOM
這麼做可以增加串流支援,方法是將陰影根放在開頭 (而不是結尾的範本標記) 上附加。
查看 Transitions API
啟用單頁應用程式 (SPA) 的精細轉場效果,方法是建立檢視畫面快照,並允許 DOM 變更,而不需要在狀態之間重疊。使用檢視畫面轉場效果建立自訂轉場效果,或使用簡易的交叉漸變預設值來改善使用者體驗。
歡迎參閱 Chrome 開發人員文章,瞭解詳細資訊和轉換範例,協助你快速上手。
WebRTC 可擴充視訊編碼擴充功能
這個擴充功能會定義在傳出 WebRTC 視訊軌上挑選可縮放視訊編碼 (SVC) 設定的標準方法。
WebXR enabledFeatures
屬性
傳回已為這個 XRSession
啟用的一組功能 (由 XRSessionInit
指定),以及規格為特定模式和功能所需的隱含功能。對於獲得的工作階段,這個項目將包含所有 requiredFeatures
,但可能是 optionalFeatures
的子集。大多數功能都有替代方法可偵測使用者是否已授予這些功能;不過,就某些功能而言,如果某項功能是否已啟用,其訊號可能會與當下無法使用的功能 (而非從過去無法取得資料) 有信號。透過查詢 enabledFeatures
,您可以判斷是否應顯示任何實用提示 (例如改善或開始追蹤),或者目前的工作階段將不再支援特定功能。
正在進行來源試用
在 Chrome 111 中,您可以選擇啟用下列新的來源試用。
淘汰在 Web Payment API 中略過 connect-src
CSP 的試用
淘汰 Web Payment API 在擷取資訊清單時略過 connect-src CSP 政策的功能。淘汰後,網站的 connect-src CSP 政策必須允許 PaymentRequest 呼叫中指定的付款方式網址,以及該方法鏈結要擷取資訊清單的任何其他網址。
在 Chrome 111 版中,針對需要暫時重新啟用略過功能的開發人員,而在 Chrome 111 和 113 之間移除了這項略過功能。如要選擇加入,請註冊 connect-src
CSP 略過的反向淘汰試用。
文件子母畫面
Document Picture-in-Picture API 是開啟新的 API,可開啟常態性視窗,其中可填入任意 HTML 內容。此為現有的 Picture-in-Picture API 的擴充,僅允許 HTMLVideoElement 進入子母畫面視窗。這可讓網頁程式開發人員為使用者提供更優質的子母畫面體驗。
參閱文件子母畫面說明文件。
註冊文件子母畫面來源試用。
淘汰和移除
這個版本的 Chrome 推出了下列淘汰和移除功能。請造訪 ChromeStatus.com,查看預定淘汰事項、目前淘汰功能以及先前移除項目的清單。
這個版本的 Chrome 移除了三項功能。
移除付款方式
PaymentInstruments 是適用於非 JIT 安裝付款應用程式的 Web API (請參閱 https://w3c.github.io/payment-handler/)。這項設計假設瀏覽器會儲存實際的付款方式詳細資料,但這些詳細資料不一定是正確的,且會使隱私權外洩。此 SDK 並未透過任何其他瀏覽器傳送,且我們從未發現任何瀏覽器供應商感興趣的部分。因此,這個 API 已淘汰並移除。
移除 Web Payment API 中的 connect-src
CSP 略過項目
淘汰 Web Payment API 在擷取資訊清單時略過 connect-src
CSP 政策的功能。移除這項政策後,網站的 connect-src
CSP 政策必須允許 PaymentRequest 呼叫中指定的付款方式網址,以及該方法鏈結要擷取資訊清單的任何其他網址。
請參閱來源試用下方的資訊,瞭解如何選擇採用淘汰試用計畫,這樣就能有更多時間針對本次移除功能進行必要調整。
canmakepayment
個事件中的商家身分
canmakepayment
Service Worker 事件可讓商家瞭解使用者在已安裝的付款應用程式中是否有已登錄的卡片。系統會使用這個事件,以無訊息的方式,從付款應用程式來源將商家的來源和任意資料傳送給服務工作者。這項跨來源通訊發生在以 JavaScript 編寫的 PaymentRequest 中,不需要使用者手勢,也未顯示任何使用者介面。這個靜音資料段落已從 canmakepayment
事件和 Android IS_READY_TO_PAY
意圖中移除。