Reader

網路平台 3 月新知

| Web Dev Blog | Default

探索穩定版和 Beta 版帶來的有趣功能 網路瀏覽器。

穩定版瀏覽器版本

2024 年 3 月 Firefox 124 Safari 17.4 和 Chrome 123 已穩定運作。 本文介紹了網路平台新增的功能。

使用 light-dark() 調整色彩配置

light-dark() 色彩函式已在 Chrome 123 推出，可讓您更輕鬆地根據使用者偏好調整色彩配置。在以下範例中，color-scheme 已設為 root 的 light dark。 自訂屬性會使用 light-dark() 顏色函式設定顏色 系統會根據使用者的淺色或深色模式偏好設定切換顯示相應的內容。

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

如需更多示例和詳細資料，請前往： 使用 light-dark() 搭配 CSS color-scheme 相依顏色

瀏覽器支援

  • Chrome：123。
  • Edge：123。
  • Firefox：120。
  • Safari：17.5。

資料來源

使用 field-sizing 更有效地控制輸入

同樣在 Chrome 123 中，field-sizing 屬性可啟用自動成長的文字輸入欄位。

瀏覽器支援

  • Chrome：123。
  • Edge：123。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

使用 text-spacing-trim 為 CJK 標點符號設定字距

在 Chrome 123 版中，text-spacing-trim 屬性會將核心套用至中文、日文、 和韓文 (CJK) 標點符號字元，以調整過多間距。 閱讀完整內容： 隆重推出四項新的 CSS 國際功能。

瀏覽器支援

  • Chrome：123。
  • Edge：123。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

@scope CSS 規則

Safari 17.4 包含 @scope敬上 可讓你選取特定 DOM 子樹狀結構中的元素，不必編寫過於具體且難以覆寫的選取器來精確指定元素，也不必將選取器與 DOM 結構緊密耦合。

詳情請參閱： 使用 CSS @scope 項規則限制選取器的觸及範圍

瀏覽器支援

  • Chrome：118。
  • Edge：118。
  • Firefox：位於旗標後方。
  • Safari：17.4。

資料來源

改善子母畫面功能

Chrome 123 提供兩項功能，改善子母畫面體驗。 第一個是 CSS picture-in-picture 顯示模式。 您可以編寫特定 CSS 規則， (部分內容) 網頁應用程式。

第二項功能可讓您 opener.focus敬上 透過文件子母畫面視窗開啟系統層級焦點 子母畫面視窗所屬分頁

這可讓您在必要時將原始分頁重新移至前景。 舉例來說，使用者需要存取的使用者介面體驗不適用於小型子母畫面視窗。

支援在區塊和表格版面配置中使用 align-content

Chrome 123 和 Safari 17.4 支援 align-content 方塊和表格的版面配置閱讀相關資訊 改為 align-content 聯絡。

Service Worker 靜態轉送 API

從 Chrome 123 開始，Service Worker Static Routing API。這個 API 可讓您宣告如何擷取特定資源路徑，也就是說，瀏覽器不需要僅執行 Service Worker，即可從快取擷取回應，也可以直接從網路擷取回應。

詳情請見 使用 Service Worker Static 轉送 API，針對特定路徑略過 Service Worker。

長動畫頁框 API

Chrome 123 也包含 Long Animation Frames API，這是 Long Tasks API 的更新項目，可讓您更瞭解緩慢的使用者介面 (UI) 更新。如要找出可能影響使用者體驗的緩慢動畫影格 「與下一個顯示的內容互動 (INP)」Core Web Vitals 指標會測量回應速度 或找出其他影響流暢度的 UI 卡頓情形。

瀏覽器支援

  • Chrome：123。
  • Edge：123。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

content-visibility 屬性

Firefox 124 支援 CSS content-visibility 資源。 這個屬性可控制元素是否要轉譯其內容 可讓瀏覽器略過轉譯內容，等到需要後再顯示內容。

瀏覽器支援

  • Chrome：85。
  • Edge：85，
  • Firefox：125。
  • Safari：18 歲。

資料來源

新增 ArrayBuffer 和陣列分組

Safari 17.4 JavaScript 增添了一些新功能，並且支援 detached 屬性和 ArrayBuffer 的 transfer() 和 transferToFixedLength() 方法。

瀏覽器支援

  • Chrome：114。
  • Edge：114。
  • Firefox：122。
  • Safari：17.4。

資料來源

Safari 17.4 還包含陣列分組方法 Object.groupBy 和 Map.groupBy。如要進一步瞭解陣列分組，請參閱 JavaScript 即將取得陣列分組方法。

瀏覽器支援

  • Chrome：117。
  • Edge：117。
  • Firefox：119。
  • Safari：17.4。

資料來源

這些功能現在可互通，因此已加入「新推出的基準」功能。

setHTMLUnsafe和parseHTMLUnsafe

在 Safari 17.4 中，setHTMLUnsafe 和 parseHTMLUnsafe 方法會允許 要從 JavaScript 使用的宣告式 Shadow DOM。 這些方法也可讓您輕鬆地將 HTML 剖析為 DOM， 與 innerHTML 或 DOMParser 相比。

Beta 版瀏覽器版本

Beta 版瀏覽器可讓您預覽即將推出的功能 瀏覽器的穩定版。現在正是測試新功能的好時機 移除。全新內容 Beta 版是 Firefox 125 和 Chrome 124。 這些版本為平台帶來許多精彩功能。查看版本 記下所有細節以下列舉幾個重點。

Firefox 125 將塑造令人期待的新版本。 此項目包含區塊上的 align-content，因此這項功能可以互通。 包括，因此成為「Baseline 新推出」的一環 Popover API系統也會一併支援 transition-behavior 屬性。 彈出式視窗和transition-behavior屬於 2024 年互通性。

Chrome 124 包含 setHTMLUnsafe 和 parseHTMLUnsafe 方法，可 允許透過 JavaScript 使用宣告式 Shadow DOM 特徵的可互通性也包含 WebSocketStream API 和 writingsuggestions 屬性。