5 月初次使用網路平台

探索 2024 年 5 月在穩定版和 Beta 版網路瀏覽器中推出的一些有趣功能。

2024 年 5 月,Firefox 126Safari 17.5Chrome 125 已穩定。這篇文章介紹了網路平台新增的功能。

Chrome 125 包含 CSS 錨定標記。這可讓您以宣告方式,將絕對位置的元素與網頁上的一或多個元素 (錨點) 建立網路網路,而不必使用 JavaScript。可捲動錨定廣告時,錨定位置的運作成效良好。常見的用途是在叫用彈出式視窗的元素旁邊顯示工具提示,或是特定選單及其彈出式選項清單。

詳情請參閱 CSS 錨定定位 API 簡介

瀏覽器支援

  • 125
  • 125
  • x
  • x

來源

CSS 逐步值函式:round()mod()rem()

Chrome 125 也包含階梯值函式,代表這些函式現已推出基準新功能。階梯值函式 round()mod()rem() 都會根據另一個「步驟值」轉換指定值。

詳情請參閱 CSS 逐步值數學函式現已在 2024 年基準中推出

瀏覽器支援

  • 125
  • 125
  • 118
  • 15.4

來源

light-dark() 函式

此外,加入 Baseline Newly available 也是 CSS 顏色函式 light-dark(),其位於 Safari 17.5 中。

light-dark() 是一個可接受兩個引數的函式,兩個引數都必須是 <color>。系統會根據使用的色彩配置,選擇兩者之一。

  • 如果使用的色彩配置為 light 或未知,系統會傳回第一個值的計算值。
  • 如果使用的色彩配置為 dark,系統會傳回第二個色彩的計算值。

詳情請參閱「CSS 色彩配置相依顏色和 light-dark()

瀏覽器支援

  • 123
  • 123
  • 120
  • 17.5

來源

Screen Wake Lock API

Firefox 126 中的到達網頁是 Screen Wake Lock API,這是另一項基準現已加入基準的一項功能。這個 API 可防止裝置變暗及鎖定螢幕。

如要瞭解如何使用這項功能,請參閱「使用 Screen Wake Lock API 保持喚醒」。

瀏覽器支援

  • 84
  • 84
  • 126
  • 16.4

來源

Compute 壓力 API

Compute Pressure API 可以提供代表系統 CPU 負載的高階狀態。透過正確的基礎硬體指標,只要系統不易管理,使用者就能夠運用可用的所有處理能力。

這項功能適用於 Chrome 125 版。Intel 主導了這個 API 的設計和實作工作,讓視訊會議應用程式能在功能與效能之間動態平衡。

參閱 Compute Pressure API 的說明文件

瀏覽器支援

  • 125
  • 125
  • x
  • x

來源

@starting-style 規則

Safari 17.5 包含 @starting-style 規則。在這個 CSS at-rule 中,你可以套用瀏覽器在網頁開啟元素前可以查詢的樣式,也可以視需要顯示項目動畫。

@starting-style 規則是CSS 新功能,讓進入和離開動畫的順暢體驗中所述的其中一項功能。

瀏覽器支援

  • 117
  • 117
  • x
  • 17.5

來源

Beta 版瀏覽器版本

Beta 版瀏覽器可讓您預覽下一個穩定版的功能。趁這個機會在全球推出前,測試或移除可能影響網站的新功能。最新 Beta 版適用於 Firefox 127Chrome 126。這些版本為 YouTube 平台帶來許多絕佳功能。完整資訊請參閱版本資訊。以下僅列出幾項重點功能。

Chrome 126 針對同一來源導覽提供跨文件檢視轉換功能。 先前你必須將網站重新架構為 SPA,才能使用 View Transitions API。不過現在已非如此。系統現在預設會為相同來源導覽啟用檢視轉換功能。您可以在同來源的兩份不同文件之間建立檢視畫面轉換。

Firefox 127 包含其他 JavaScript Set 方法:intersection()union()difference()symmetricDifference()isSubsetOf()isSupersetOf()isDisjointFrom()