新增 CSS 顏色類型和色域、CSS 三角函數和 View Transitions API。
除非另有註明,否則下列變更適用於 Android、ChromeOS、Linux、macOS 和 Windows 的最新 Chrome Beta 版。您可以透過提供的連結或 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 顏色 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 三角函式
三角函式 sin()
、cos()
、tan()
、asin()
、acos()
、atan()
、atan2()
已新增至 CSS 數學運算式。
CSS 自訂屬性的樣式容器查詢樣式
將 style()
函式新增至 @container
規則,以便根據祖系元素的自訂屬性值套用樣式。
baseline-source
屬性
baseline-source
屬性可讓網頁開發人員指定內嵌層級方塊是否應使用 first
或 last
基準來對齊換行字元。
網站 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
這會在開頭 (而非結尾的範本標記) 附加陰影根目錄,以新增對串流的支援。
查看 Transitions API
透過建立檢視畫面快照並讓 DOM 在狀態之間不會重疊,讓單頁應用程式 (SPA) 建立精美的轉換效果。使用 View Transitions 建立自訂轉場效果,或使用簡單的交叉漸變預設設定來改善使用者體驗。
如需瞭解更多資訊及轉換範例,請參閱 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 版移除了這項略過功能,從 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/)。瀏覽器在設計時,會假設瀏覽器會儲存實際的付款方式詳細資料,但實際上並非如此,因此可能造成隱私權外洩。此外,我們並未在任何其他瀏覽器上推出它,也沒有任何來自其他瀏覽器廠商的興趣。因此這個 API 已淘汰並移除。
移除 Web Payment API 中的 connect-src
個略過 CSP
淘汰 Web Payment API 的功能,在擷取資訊清單時略過 connect-src
CSP 政策。移除後,網站的 connect-src
CSP 政策必須允許 PaymentRequest 呼叫中指定的付款方式網址,以及方法鏈結擷取其資訊清單的任何其他網址。
查看來源試用期間的資訊,瞭解即可選擇加入淘汰試用計畫的方法。這樣一來,您就能有更多時間對這項異動做出必要調整。
canmakepayment
事件中的商家身分
canmakepayment
Service Worker 事件會通知商家使用者是否在已安裝的付款應用程式中登錄卡片。用來在不通知使用者的情況下,將商家的來源和任意資料從付款應用程式來源傳遞至 Service Worker。這則跨來源通訊是在以 JavaScript 建構的 PaymentRequest 上進行,不需要使用者手勢,也未顯示任何使用者介面。此無訊息資料通道已從 canmakepayment
事件和 Android IS_READY_TO_PAY
意圖中移除)。