網路平台 3 月新知

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

Rachel Andrew

穩定版瀏覽器版本

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 at-rule

Safari 17.4 包含 @scope，可讓您選取特定 DOM 子樹狀結構中的元素，精確地指定元素，而無需編寫難以覆寫的過於特定的選取器，也不會將選取器與 DOM 結構過度耦合。

如要進一步瞭解，請參閱使用 CSS @scope at-rule 限制選取器的觸及範圍

瀏覽器支援

  • Chrome：118。
  • Edge：118。
  • Firefox：在標記後方。
  • Safari：17.4。

資料來源

子母畫面功能改善

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

第二個功能可讓您透過文件子母畫面視窗使用 opener.focus，將系統層級的焦點移至文件子母畫面視窗所屬的分頁。

這樣一來，您就能在必要時將原始分頁帶回前景。例如，當使用者需要存取的 UI 體驗無法在較小的畫中畫視窗中顯示時。

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

Chrome 123 和 Safari 17.4 支援在區塊和表格版面配置中使用 align-content。請參閱 align-content 支援服務異動說明。

Service Worker Static Routing API

自 Chrome 123 起，Service Worker 靜態轉送 API 已開放使用。這個 API 可讓您以宣告方式指出應如何擷取特定資源路徑，也就是說，瀏覽器不需要執行 Service Worker，只需從快取或直接從網路擷取回應。

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

Long Animation Frames API

Chrome 123 也包含 Long Animation Frames API，這是 Long Tasks API 的更新項目，可讓您更瞭解緩慢的使用者介面 (UI) 更新。這項功能可用於找出可能影響Interaction to Next Paint (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。與 innerHTML 或 DOMParser 相比，這些方法也提供了更簡單的方法，可將 HTML 強制剖析為 DOM。

Beta 版瀏覽器

瀏覽器測試版可讓您預覽瀏覽器的下一個穩定版。在正式發布前，您可以測試可能影響網站的新功能或移除項目。新的 Beta 版為 Firefox 125 和 Chrome 124。這些版本為平台帶來許多精彩功能。如需瞭解所有詳細資訊，請參閱版本資訊。以下列舉幾個重點。

Firefox 125 將成為令人期待的版本。這項功能包含區塊上的 align-content，可讓這項功能互通。Popover API 也包含在內，因此成為基準新功能的一部分。系統也支援 transition-behavior 屬性。Popover 和 transition-behavior 是 Interop 2024 的一部分。

Chrome 124 包含 setHTMLUnsafe 和 parseHTMLUnsafe 方法，可讓您從 JavaScript 使用宣告式 Shadow DOM，讓這些功能可互通。此外，WebSocketStream API 和 writingsuggestions 屬性也包含在內。