瞭解 2024 年 5 月期間,穩定版和 Beta 版網頁瀏覽器推出的幾項有趣功能。
穩定版瀏覽器
2024 年 5 月,Firefox 126、Safari 17.5 和 Chrome 125 都已穩定推出。本文將介紹網頁平台新增的功能。
CSS 錨點定位
Chrome 125 包含 CSS 錨點定位功能。這樣一來,您就能以宣告式方式將絕對定位元素繫結至網頁上一個或多個其他元素 (錨點),而無須使用 JavaScript。當錨點可捲動時,錨點定位功能可發揮最佳效能。常見的用途是將彈出式視窗 (例如工具提示) 置於叫用該彈出式視窗的元素旁,或是選取選單及其彈出式視窗選項清單。
如要進一步瞭解,請參閱「CSS 錨點定位 API 簡介」。
CSS 階梯式值函式:round()
、mod()
和 rem()
Chrome 125 也包含階梯式值函式,這表示這些函式現在已可供新基準使用。階梯式值函式 round()
、mod()
和 rem()
都會根據另一個「階梯式值」轉換指定值。
如需進一步瞭解,請參閱「CSS 分段值數學函式現已納入 Baseline 2024」一文。
light-dark()
函式
加入「Baseline Newly Available」的 CSS 顏色函式 light-dark()
也已在 Safari 17.5 中推出。
light-dark()
是可接受兩個引數的函式,兩者都必須是 <color>
。系統會根據所使用的色彩配置,選擇其中一種顏色。
- 如果使用的配色方案為
light
或不明,則會傳回第一個值的計算值。 - 如果使用的配色方案為
dark
,則會傳回第二個顏色的計算值。
如需進一步瞭解,請參閱「使用 light-dark() 的 CSS 色彩配置相關顏色 」一文。
Screen Wake Lock API
在 Firefox 126 中推出的 Screen Wake Lock API 是另一項現已納入 Baseline Newly Available 的功能。這個 API 可防止裝置調低亮度和鎖定螢幕。
如要瞭解如何使用這項功能,請參閱「使用 Screen Wake Lock API 保持喚醒狀態」一文。
Compute Pressure API
Compute Pressure API 提供高層級狀態,代表系統上的 CPU 負載。這可讓實作項目使用正確的基礎硬體指標,確保使用者在系統未受到難以管理的壓力下,能充分利用所有可用的處理能力。
這項功能已在 Chrome 125 版中推出。Intel 負責設計及實作這項 API,讓視訊會議應用程式能動態平衡功能和效能。
@starting-style
規則
Safari 17.5 包含 @starting-style
規則。這個 CSS at-rule 可讓您套用樣式,讓瀏覽器在元素在網頁上開啟前查詢,以便在輸入動畫中使用。
@starting-style
規則是 四項新 CSS 功能,可提供流暢的進入和離開動畫 中所涵蓋的功能之一。
Beta 版瀏覽器
瀏覽器測試版可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前,您可以測試可能影響網站的新功能或移除項目。新的 Beta 版為 Firefox 127 和 Chrome 126。這些版本為平台帶來許多精彩功能。如需瞭解所有詳細資訊,請參閱版本資訊。以下列舉幾個重點。
Chrome 126 包含跨文件檢視轉場效果,可用於相同來源的導覽。過去,您必須將網站重新架構為 SPA,才能使用 View Transitions API。不過現在已非如此。系統現在會預設為啟用相同來源導覽的檢視畫面轉場效果。您可以在兩份同源文件之間建立檢視畫面轉場效果。
Firefox 127 包含其他 JavaScript Set 方法:intersection()
、union()
、difference()
、symmetricDifference()
、isSubsetOf()
、isSupersetOf()
和 isDisjointFrom()
。