以下是一些注意事項:
- 使用 CSS 錨定位置,錨定元素比以往更加容易。
- Compute Pressure API 有助於最佳化可用的電腦電源。
- Storage Access API 展開後,支援超過 Cookie 儲存空間。
- 除此之外,你還有更多功能。
我是 Adriana Jara一起來深入探索 Chrome 125 為開發人員推出的新功能。
CSS 錨定位置。
將元素固定至另一個元素可讓您建立 UI 模式,例如將彈出式視窗做為工具提示使用,並附加至叫用該元素的元素。
透過 CSS 錨定位置,您可以使用宣告式的方式,讓絕對位置元素與網頁上的一或多個元素共用。這個 API 不需要 JavaScript,而且可在錨定標記可捲動時發揮最佳效能。
錨定定位功能包含大量 CSS 屬性。A 罩杯 幾個主要屬性如下:
anchor-name
:將元素設為其他元素的錨點。position-anchor
:說明「預設」錨定元素 用於錨定位置。anchor()
函式:代表錨定標記的位置 元素,藉此設定錨定元素。inset-area
:一種定位簡寫,適用於一般相對位置。
Compute Pressure API。
Compute Pressure API 提供概略狀態,代表系統的 CPU 負載。
在最佳化電腦電源用量的平衡時,API 會使用正確的基礎硬體指標,確保使用者可以充分利用所有可用處理能力,只要系統本身不會承受壓力。
這個 API 的設計與實作工作由 Intel 主導,可讓視訊會議應用程式以動態方式在功能和效能之間取得平衡。
如需範例和詳細資訊,請造訪 Compute Pressure API。
Storage Access API (SAA) 擴充至非 Cookie 儲存空間。
Storage Access API 是 JavaScript API,專為需要跨網站 Cookie 的嵌入而建立的,可視需要載入跨網站資源,向使用者要求存取權限。
此版本包含 Cookie 以外的 API 使用擴充功能。有了這項擴充功能,您就能在第三方內容 (例如已建立索引的資料庫和本機儲存空間) 中,存取未分區的 Cookie 和非 Cookie 儲存空間。以下程式碼範例說明如何要求存取已建立索引的資料庫。
// Request a new storage handle via rSA (this may prompt the user)
let handle = await document.requestStorageAccess({indexedDB : true});
// Open or create an indexedDB that is shared with the 1P context
let messageDB = handle.indexedDB.open("messages");
還有更多獎品等著您!
當然,還有許多其他功能
Device Posture API 和 ViewportSegment Enumeration API 提供來源試用。這些 API 旨在協助開發人員指定摺疊式裝置。
Shared Storage API 現在支援執行跨來源 Worklet,而無需建立 iframe。
延伸閱讀
這只涵蓋部分重要亮點。請參閱下列連結: Chrome 125 的其他變更。
訂閱
歡迎訂閱 Chrome Developers YouTube 頻道, 每次推出新影片時,您都會收到電子郵件通知。
Yo soy Adriana Jara 等 Chrome 126 推出後,立即向各位說明 Chrome 的新功能!