探索 2024 年 3 月在穩定版和 Beta 版網路瀏覽器中推出的一些有趣功能。
穩定版瀏覽器
2024 年 3 月，Firefox 124、Safari 17.4 和 Chrome 123 已穩定。這篇文章介紹了網路平台新增的功能。
使用 light-dark() 調整色彩配置
Chrome 123 版內建 light-dark() 顏色函式，可更輕鬆地根據使用者偏好設定調整色彩配置。在以下範例中，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 選用顏色
使用 field-sizing 進一步控管輸入值
在 Chrome 123 中，field-sizing 屬性還可自動增加文字輸入欄位。
瀏覽器支援
- 123
- x
- x
- x
Kerning 使用 text-spacing-trim 加上 CJK 標點符號
在 Chrome 123 中，text-spacing-trim 屬性會對中文、日文和韓文 (CJK) 標點符號使用打字，以便調整空格過多。詳情請參閱「CSS 隆重推出四項全新國際功能」。
瀏覽器支援
- 123
- x
- x
- x
@scope CSS at-rule
Safari 17.4 內含 @scope，可讓您在特定 DOM 子樹狀結構中選取元素、精確指定元素，而不必編寫難以覆寫且難以覆寫的明確選取器，也沒有將選取器與 DOM 結構過於緊密。
詳情請參閱使用 CSS @scope at-rule 來限制選取器的觸及率
改善子母畫面功能
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 Static Routing API。這個 API 可讓您以宣告的方式，說明要如何擷取特定資源路徑，這表示瀏覽器不需要只執行 Service Worker，即可從快取或直接從網路擷取回應。
詳情請參閱使用 Service Worker Static Routing API 來略過特定路徑的 Service Worker。
長動畫頁框 API
Chrome 123 版也包含 The Long Animation Frames API，是 Long Tasks API 的更新項目，有助於進一步瞭解緩慢使用者介面 (UI) 更新。這項指標有助於找出可能影響「與下一次繪製互動 (INP)」Core Web Vitals 指標評估回應速度的緩慢動畫影格，或是找出其他影響流暢度的 UI 卡頓指標。
瀏覽器支援
- 123
- x
- x
- x
content-visibility 屬性
Firefox 124 支援 CSS content-visibility 屬性。這項屬性可控制元素是否完全算繪其內容，讓瀏覽器在需要時才略過轉譯內容。
新增至 ArrayBuffer 和陣列分組
在 Safari 17.4 JavaScript 中，JavaScript 取得了支援 detached 屬性以及 ArrayBuffer 的 transfer() 和 transferToFixedLength() 方法的一些新功能。
Safari 17.4 還包含陣列分組方法 Object.groupBy 和 Map.groupBy。如要進一步瞭解陣列分組，請參閱 JavaScript 取得陣列分組方法。
這些功能現在可互通，因此加入了 Baseline 新推出的功能。
setHTMLUnsafe和parseHTMLUnsafe
Safari 17.4 中的 setHTMLUnsafe 和 parseHTMLUnsafe 方法可在 JavaScript 中使用宣告式陰影 DOM。相較於 innerHTML 或 DOMParser，這些方法也能夠以更輕鬆的方式，以命令方式將 HTML 剖析為 DOM。
Beta 版瀏覽器版本
Beta 版瀏覽器可讓您預覽下一個穩定版的功能。趁這個機會在全球推出前，測試或移除可能影響網站的新功能。最新 Beta 版適用於 Firefox 125 和 Chrome 124。這些版本為 YouTube 平台帶來許多絕佳功能。完整資訊請參閱版本資訊。以下僅列出幾項重點功能。
Firefox 125 即將推出令人期待的版本。
其中包含 align-content，因此這項功能可互通。此外，這個 API 也屬於 Popover API，因此成為基準新上架的一部分。系統也支援 transition-behavior 屬性。
Popover 和 transition-behavior 是 Interop 2024 的一部分。
Chrome 124 版包含 setHTMLUnsafe 和 parseHTMLUnsafe 方法，因此可透過 JavaScript 使用宣告式 Shadow DOM，使這些功能可互通。其中也包含 WebSocketStream API 和 writingsuggestions 屬性。