本頁面由 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 遮罩功能，這是 Chrome 120 中 CSS 遮罩功能強化功能的後續動作，為 SVG 新增了遮罩功能 (多個遮罩，以及 mask-mode、mask-composite、mask-position 和 mask-repeat)。此外，現在也支援遠端 SVG 遮罩 (例如 mask: 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 回應標頭會宣告網址查詢的部分或全部部分可供比對時忽略。您可以宣告查詢參數鍵的順序不應阻止比對、特定查詢參數不應阻止比對，或是只有特定已知查詢參數應導致不相符。

如要進一步瞭解這些異動，請參閱「投機規則 API 改善項目」。