探索 2023 年 5 月穩定版和 Beta 版網路瀏覽器提供的一些有趣功能。
穩定版瀏覽器
Firefox 113、Chrome 113、Chrome 114 和 Safari 16.5 已成為穩定版。一起來看看這對網路平台的影響。
WebGPU
Chrome 113 包含 WebGPU，這是專為網頁打造的 WebGL 和 WebGL 2 圖形 API 的後續版本，不僅提供 GPU 運算、減少 GPU 硬體負擔、能從單個圖形裝置算繪至多個畫布的功能，以及更可預測的效能，更提供新式功能。
第一方集合
第一方集合 (FPS) 是 Privacy Sandbox 的一部分。機構可以宣告網站間的關係，讓瀏覽器決定何時允許組合中網站的有限第三方 Cookie 存取。在 Chrome 113 中開始分階段推出每秒影格數。
CSS 媒體功能和其他內容
對於 CSS，Chrome 113 提供 overflow-inline 和 overflow-block 媒體功能。
以及 update 媒體功能。
此外，我們也包含 linear() 加/減速函式，如要進一步瞭解詳細資訊，請參閱「使用 linear() 加/減速函式在 CSS 中建立複雜的動畫曲線」一文。
瀏覽器支援
- 113
- 113
- 112
- 17.2
CSS 色彩層級 4 功能
Firefox 113 包含 color()、lab()、lch()、oklab()、oklch() 和 color-mix() 功能表示法，以及 forced-color-adjust 屬性。也就是說，新的色域和函式現在同時支援這三個主要引擎。如要進一步瞭解這些色域和函式，請參閱高畫質 CSS 顏色指南。
進一步掌控:nth-child()的所選項目
Firefox 113 還新增將選取器清單傳遞至 :nth-child() 和 nth-last-child() 的功能。如要進一步瞭解相關資訊，並查看「使用 S 語法進一步控制 :nth-child() 選項」一文中的範例。
瀏覽器支援
- 111
- 111
- 113
- 9
壓縮串流 API
由於 Firefox 113 已納入三個主要引擎，Compressions Streams API 能為串流作業進行壓縮及解壓縮。換句話說，JavaScript 應用程式不再需要封裝壓縮程式庫。
CSS 巢狀結構
Safari 16.5 通常已解決問題，但也新增了 CSS Nesting 支援，全新的巢狀結構選取器 > (用於為相關樣式規則建立巢狀結構)，採用預先處理工具的開發人員應該不會感到陌生：
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
在廣告標題與text-wrap: balance之間取得平衡
在 Chrome 114 以上版本中，你可以使用 text-wrap: balance。這有助於平衡標題的處理，避免最後一行顯示單一字詞的問題，提供更美觀且易讀的結果。詳情請參閱 CSS 文字換行：餘額。
CHIPS：具有獨立分區狀態的 Cookie
在逐步淘汰第三方 Cookie 的過程中，CHIPS 可讓您透過新的 Cookie 屬性 Partitioned，選擇採用依頂層網站劃分的第三方 Cookie。CHIPS 適用於 Chrome 114。
Popover API
此外，Chrome 114 還有 Popover API，可讓你輕鬆建立顯示在所有其他網頁應用程式 UI 頂端的暫時性使用者介面 (UI) 元素。
包括動作選單、表單元素建議、內容挑選器及教學 UI 等使用者互動元素。
新的彈出式視窗屬性可讓任何元素自動顯示在頂層圖層中。也就是說，您不必費心處理開發人員的位置、堆疊元素、焦點或鍵盤互動等問題。
詳情請參閱彈出式視窗 API 簡介。
Beta 版瀏覽器版本
「Beta 版瀏覽器」可讓您預覽瀏覽器下一個穩定版本即將推出的功能。敬請把握這個大好機會，測試及移除哪些功能，以免影響網站在全球發布前受到影響。最新的 Beta 版功能為 Firefox 114、Chrome 115 和 Safari 16.6。這些版本為 YouTube 平台帶來許多絕佳功能。請查看版本資訊，瞭解所有細節，以下只是其中幾項重點摘要。
Chrome 115 包含多個 CSS display 屬性值。這表示 display: flex 會變為 display: block flex，而 display: block 會變為 display: block flow。單一值仍會保留為舊版關鍵字，而在 Chrome 穩定版中，這個值會導致所有引擎中的多個值使用。
此外，在 Chrome 115 中，還有網路動畫規格的 ScrollTimeline 和 ViewTimeline 擴充功能。這些產品可讓您透過 CSS 和 JavaScript 啟用捲動式動畫。
Firefox 114 包含 WebTransport API，這是 WebSocket 的更新項目，可支援多重串流、單向串流和失序傳送。
網路新手系列叢書部分