2023 年 5 月,我們在穩定版和 Beta 版網路瀏覽器中推出了幾項有趣的功能,歡迎一探究竟。
穩定版瀏覽器
2023 年 5 月,Firefox 113、Chrome 113、Chrome 114 和 Safari 16.5 已穩定推出。讓我們來看看這對網頁平台有何影響。
WebGPU
Chrome 113 內含 WebGPU,這是 WebGL 和 WebGL 2 圖形 API 的後續版本。它具備多項現代功能,例如 GPU 運算、減少 GPU 硬體的負擔、透過單一圖形裝置算繪至多個畫布,以及更優異、可預測的效能。
第一方集合
第一方集合 (FPS) 是 Privacy Sandbox 的一部分。這是機構宣告網站之間關係的方式,讓瀏覽器決定何時允許第三方 Cookie 存取集合中的網站。FPS 已在 Chrome 113 開始階段性推出。
CSS 媒體功能和其他功能
針對 CSS,Chrome 113 包含 overflow-inline
和 overflow-block
媒體功能。
以及 update
媒體功能。
這裡也包含 linear()
緩和函式,您可以參閱「使用 linear()
緩和函式在 CSS 中建立複雜的動畫曲線」一文,進一步瞭解這項函式。
瀏覽器支援
CSS 顏色等級 4 功能
Firefox 113 包含 color()
、lab()
、lch()
、oklab()
、oklch()
和 color-mix()
功能表示法,以及 forced-color-調整屬性。這意味著,現在所有三種主要引擎都支援新的色域和函數。如要進一步瞭解這些色彩空間和函式,請參閱高解析度 CSS 色彩指南。
進一步掌控 :nth-child()
選項
Firefox 113 也新增了將選取器清單傳入 :nth-child()
和 nth-last-child()
的功能。如要進一步瞭解這項功能,請參閱「使用 S 語法進一步控制 :nth-child() 選取項目」一文中的範例。
瀏覽器支援
Compressions Streams API
由於 Compressions Streams API 已納入 Firefox 113,現在所有三個主要引擎都支援這項 API,可用於壓縮和解壓縮串流。這表示 JavaScript 應用程式不再需要封裝壓縮程式庫。
CSS 巢狀結構
Safari 16.5 已解決大部分問題,但也新增了對 CSS 巢狀的支援,並提供新的巢狀選取器 >
,用於巢狀相關樣式規則,讓使用前置處理器的開發人員能夠輕鬆上手:
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}
使用 text-wrap: balance
平衡標題
自 Chrome 114 版起,您可以使用 text-wrap: balance
。這樣一來,您就能平衡標題,避免最後一行只有一個字的問題,提供更悅目、更易讀的結果。如需更多資訊,請參閱 CSS text-wrap: balance。
CHIPS:具有獨立分區狀態的 Cookie
逐步淘汰第三方 Cookie 的一部分,CHIPS 可使用新的 Cookie 屬性 Partitioned
,讓您選擇啟用第三方 Cookie 並按頂層網站劃分。Chrome 114 支援 CHIPS。
Popover API
Chrome 114 也提供 Popover API,可讓您更輕鬆地建構可在所有其他網頁應用程式 UI 上方顯示的暫時性使用者介面 (UI) 元素。
包括使用者互動元素,例如動作選單、表單元素建議、內容挑選器和教學 UI。
新的彈出式視窗屬性可讓任何元素自動顯示在頂層。這表示開發人員不必再擔心元素的定位、堆疊、焦點或鍵盤互動。
如要進一步瞭解,請參閱「推出彈出式視窗 API」一文。
Beta 版瀏覽器
瀏覽器 Beta 版可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前,您可以測試可能會影響網站的新功能或移除項目。最新 Beta 版包括 Firefox 114、Chrome 115 和 Safari 16.6。這些版本為平台帶來許多精彩功能。詳情請參閱版本資訊,以下僅列出幾項重點:
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,這是 WebSockets 的最新更新,可支援多個串流、單向串流和非順序傳送。