以下是一些注意事項:
- 運用
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 的改善項目。
Element Capture API 來源試用
Element Capture API 開放來源試用。這個 API 可讓您擷取並記錄特定 HTML 元素。它會將整個分頁的擷取轉換為特定 DOM 子樹狀結構的擷取內容,只擷取 target 元素的直接子系。換句話說,這項功能會裁剪及移除遭到遮蓋和遮住的內容。
以 Element Capture API 為例,這個 API 是非常實用的視訊會議應用程式,可讓您將第三方應用程式嵌入 iframe 中。在此情況下,建議您以影片形式擷取該 iframe,並傳送給遠端參與者。
![Chrome 中視訊會議通話的螢幕截圖。](https://developer.chrome.google.cn/static/docs/web-platform/element-capture/image/1.png?authuser=19&hl=zh-tw)
請注意,您可以使用區域擷取功能完成這項操作,但若某些內容 (例如下拉式清單) 會在所選內容上方繪製,則該下拉式選單會納入錄製內容的一部分。
![已擷取下拉式清單的螢幕截圖。](https://developer.chrome.google.cn/static/docs/web-platform/element-capture/image/3.png?authuser=19&hl=zh-tw)
Element Capture API 讓您指定想要分享的元素,就能解決這個問題。
![目標元素螢幕截圖 (檢視畫面中沒有下拉式選單)。](https://developer.chrome.google.cn/static/docs/web-platform/element-capture/image/4.png?authuser=19&hl=zh-tw)
瞭解「從任何元素擷取影片串流」以取得程式碼範例,並註冊參加 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 頻道, 每次推出新影片時,您都會收到電子郵件通知。
Yo soy Adriana Jara 等 Chrome 122 推出後,立即向各位說明 Chrome 的新功能!