以下是一些注意事項:
- 運用
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 的改善項目」。
Element Capture API 來源試用
Element Capture API 適用於來源試用。這個 API 可讓您擷取及記錄特定 HTML 元素。它會將整個分頁的擷取內容,轉換成特定 DOM 子樹狀結構的擷取內容,只擷取 target-元素的直接子系。也就是說,系統會裁剪並移除已遮蔽的內容。
Element Capture API 是一個實用的視訊會議應用程式,可讓使用者在 iframe 中嵌入第三方應用程式。在這種情況下,您可能會想將 iframe 擷取為影片,然後傳輸給遠端參與者。
請注意,您可以使用「區域擷取」功能來擷取影片,但在這種情況下,如果選取的內容上方會顯示下拉式選單 (例如下拉式清單),則該下拉式選單會是錄製內容的一部分。
Element Capture API 可以讓您指定要分享的元素,解決這個問題。
請參閱「從任何元素擷取影片串流」中的程式碼範例,並註冊參加 ElementCapture 來源試用
還有更多獎品等著您!
當然還有許多其他東西。
Document Picture-in-Picture API 的
resizeBy()
和resizeTo()
方法現在需要使用者手勢。您可以使用
HTMLSelectElement
的showPicker()
方法,透過程式輔助方式開啟<select>
元素的選項挑選器。scope_extensions
目前處於來源試用階段,只要網頁應用程式主要來源和相關來源之間有協議,即可將網頁應用程式的行為納入其他來源。
其他資訊
以上內容僅涵蓋部分重點功能。如要瞭解 Chrome 121 的其他變更,請參閱下列連結。
- Chrome 開發人員工具新功能 (121)
- Chrome 121 淘汰和移除
- 適用於 Chrome 121 的 ChromeStatus.com 更新
- Chromium 原始碼存放區變更清單
- Chrome 發布時間表
訂閱
如要隨時掌握最新資訊,請訂閱 Chrome Developers YouTube 頻道,每當我們推出新影片時,您就會收到電子郵件通知。
Yosoy Adriana Jara., 到了 Chrome 122 推出後,我就會告訴你 Chrome 的新功能!