探索 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 逐步值數學函式現已在 2024 年基準中推出。
light-dark() 函式
此外，加入 Baseline Newly available 也是 CSS 顏色函式 light-dark()，其位於 Safari 17.5 中。
light-dark() 是一個可接受兩個引數的函式，兩個引數都必須是 <color>。系統會根據使用的色彩配置，選擇兩者之一。
- 如果使用的色彩配置為
light或未知，系統會傳回第一個值的計算值。 - 如果使用的色彩配置為
dark，系統會傳回第二個色彩的計算值。
詳情請參閱「CSS 色彩配置相依顏色和 light-dark() 。
Screen Wake Lock API
Firefox 126 中的到達網頁是 Screen Wake Lock API，這是另一項基準現已加入基準的一項功能。這個 API 可防止裝置變暗及鎖定螢幕。
如要瞭解如何使用這項功能，請參閱「使用 Screen Wake Lock API 保持喚醒」。
Compute 壓力 API
Compute Pressure API 可以提供代表系統 CPU 負載的高階狀態。透過正確的基礎硬體指標，只要系統不易管理，使用者就能夠運用可用的所有處理能力。
這項功能適用於 Chrome 125 版。Intel 主導了這個 API 的設計和實作工作，讓視訊會議應用程式能在功能與效能之間動態平衡。
參閱 Compute Pressure API 的說明文件。
@starting-style 規則
Safari 17.5 包含 @starting-style 規則。在這個 CSS at-rule 中，你可以套用瀏覽器在網頁開啟元素前可以查詢的樣式，也可以視需要顯示項目動畫。
@starting-style 規則是CSS 新功能，讓進入和離開動畫的順暢體驗中所述的其中一項功能。
Beta 版瀏覽器版本
Beta 版瀏覽器可讓您預覽下一個穩定版的功能。趁這個機會在全球推出前，測試或移除可能影響網站的新功能。最新 Beta 版適用於 Firefox 127 和 Chrome 126。這些版本為 YouTube 平台帶來許多絕佳功能。完整資訊請參閱版本資訊。以下僅列出幾項重點功能。
Chrome 126 針對同一來源導覽提供跨文件檢視轉換功能。 先前你必須將網站重新架構為 SPA，才能使用 View Transitions API。不過現在已非如此。系統現在預設會為相同來源導覽啟用檢視轉換功能。您可以在同來源的兩份不同文件之間建立檢視畫面轉換。
Firefox 127 包含其他 JavaScript Set 方法：intersection()、union()、difference()、symmetricDifference()、isSubsetOf()、isSupersetOf() 和 isDisjointFrom()。