本頁面由 Cloud Translation API 翻譯而成。

Chrome 121 新功能

Adriana Jara

以下是一些注意事項：

運用 font-palette 動畫和其他 CSS 更新，為文字加上獨特觸控效果。
Speculation Rules API 已改善項目。
您可以在來源試用期間試用 Element Capture API。
除此之外，你還有更多功能。

我是 Adriana Jara一起來深入探索 Chrome 121 為開發人員推出的新功能。

CSS 更新。

讓我們先從 CSS 更新開始：

您現在可以使用 scrollbar-color 和 scrollbar-width 屬性了。您可以自訂捲軸，並調整顏色和寬度，顧名思義。

font-palette 屬性可讓您選取特定調色盤，以顯示顏色字型。這個屬性現在支援動畫，因此在兩個所選調色盤之間切換時，也能流暢地切換調色盤。

虛擬元素 ::spelling-error 和 ::grammar-error 可讓您自訂拼字和文法錯誤的顏色、以背景顏色或其他裝飾方式醒目顯示錯字，以及實作自訂拼字檢查功能，呈現更全面的整合外觀。

我們改善了 SVG 的 CSS 遮罩，這將是後續改善的 CSS 遮罩支援功能：Chrome 120 版將新增對 SVG (多個遮罩，以及 mask-mode、mask-composite、mask-position 和 mask-repeat) 的 SVG 遮罩支援。此外，系統現在也支援遠端 SVG 遮罩 (例如遮罩：url(masks.svg#star))。

更正：本文先前版本提到在 @import 中新增支援 supports() 條件，但實際上並非必要。這項變更已納入 Chrome 第 122 版。

Speculation Rules API 更新

網站可以使用 Speculation Rules API，透過程式輔助方式指示 Chrome 要預先轉譯哪些網頁，藉此縮短網頁瀏覽時間，打造更優質的使用者體驗。

現在 API 支援文件規則：這些是推測規則語法的延伸，可讓瀏覽器取得網址清單，以便從網頁中的元素載入。文件規則可能包含相關連結適用的條件。除了新的「eagerness」欄位外，您還可以在頁面懸停或滑鼠遊標懸停時，立即預先擷取或預先轉譯網頁的連結。

以下是文件規則的範例：

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

另外一項變更允許使用 Speculation-Rules HTTP 回應標頭來指定推測規則。標頭是內嵌 <script> 元素的替代方案。這個標頭的值必須是指向含 "application/speculationrules+json" MIME 類型文字資源的網址。資源的規則會新增至文件的規則集。

此外，No-Vary-Search 提示也會啟用推測預先擷取功能，即使網址查詢參數有所變更也能進行比對。No-Vary-Search HTTP 回應標頭會宣告網址查詢的部分或全部部分可以忽略，以進行比對。您可以在應用程式中宣告查詢參數鍵的順序不應造成比對問題、特定查詢參數不應造成比對問題，或是只有某些已知查詢參數會造成比對不相符。

如要進一步瞭解這些異動，請參閱 Speculation Rules API 的改善項目。