本頁面由 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 遮罩 (例如遮罩：url(masks.svg#star))。

修正：本文先前版本提到在 @import 中新增對 supports() 條件的支援，但實際上並非如此。Chrome 第 122 版才會反映這項變更。

推測規則 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 的改善項目」。