5 月初次使用網路平台

2023 年 5 月,我們在穩定版和 Beta 版網路瀏覽器中推出了幾項有趣的功能,歡迎一探究竟。

2023 年 5 月,Firefox 113Chrome 113Chrome 114Safari 16.5 已穩定推出。讓我們來看看這對網頁平台有何影響。

Chrome 113 內含 WebGPU,這是 WebGL 和 WebGL 2 圖形 API 的後續版本。它具備多項現代功能,例如 GPU 運算、減少 GPU 硬體的負擔、透過單一圖形裝置算繪至多個畫布,以及更優異、可預測的效能。

瀏覽器支援

  • Chrome:113。
  • Edge:113。
  • Firefox Technology Preview:支援。
  • Safari 技術預覽:支援。

資料來源

第一方集合

第一方集合 (FPS)Privacy Sandbox 的一部分。這是機構宣告網站之間關係的方式,讓瀏覽器決定何時允許第三方 Cookie 存取集合中的網站。FPS 已在 Chrome 113 開始階段性推出。

CSS 媒體功能和其他功能

針對 CSS,Chrome 113 包含 overflow-inlineoverflow-block 媒體功能。

瀏覽器支援

  • Chrome:113。
  • Edge:113。
  • Firefox:66。
  • Safari:17。

資料來源

以及 update 媒體功能。

瀏覽器支援

  • Chrome:113。
  • Edge:113。
  • Firefox:102。
  • Safari:17。

資料來源

這裡也包含 linear() 緩和函式,您可以參閱「使用 linear() 緩和函式在 CSS 中建立複雜的動畫曲線」一文,進一步瞭解這項函式。

瀏覽器支援

  • Chrome:113。
  • Edge:113。
  • Firefox:112。
  • Safari:17.2。

CSS 顏色等級 4 功能

Firefox 113 包含 color()lab()lch()oklab()oklch()color-mix() 功能表示法,以及 forced-color-調整屬性。這意味著,現在所有三種主要引擎都支援新的色域和函數。如要進一步瞭解這些色彩空間和函式,請參閱高解析度 CSS 色彩指南

瀏覽器支援

  • Chrome:111.
  • Edge:111。
  • Firefox:113。
  • Safari:16.2。

資料來源

進一步掌控 :nth-child() 選項

Firefox 113 也新增了將選取器清單傳入 :nth-child()nth-last-child() 的功能。如要進一步瞭解這項功能,請參閱「使用 S 語法進一步控制 :nth-child() 選取項目」一文中的範例。

瀏覽器支援

  • Chrome:111。
  • Edge:111。
  • Firefox:113。
  • Safari:9.

Compressions Streams API

由於 Compressions Streams API 已納入 Firefox 113,現在所有三個主要引擎都支援這項 API,可用於壓縮和解壓縮串流。這表示 JavaScript 應用程式不再需要封裝壓縮程式庫。

瀏覽器支援

  • Chrome:80。
  • 邊緣:80。
  • Firefox:113。
  • Safari:16.4。

資料來源

CSS 巢狀結構

Safari 16.5 已解決大部分問題,但也新增了對 CSS 巢狀的支援,並提供新的巢狀選取器 >,用於巢狀相關樣式規則,讓使用前置處理器的開發人員能夠輕鬆上手:

.nesting {
 
color: hotpink;

 
> .is {
   
color: rebeccapurple;

   
> .awesome {
     
color: deeppink;
   
}
 
}
}

瀏覽器支援

  • Chrome:120。
  • Edge:120。
  • Firefox:117。
  • Safari:17.2。

資料來源

使用 text-wrap: balance 平衡標題

自 Chrome 114 版起,您可以使用 text-wrap: balance。這樣一來,您就能平衡標題,避免最後一行只有一個字的問題,提供更悅目、更易讀的結果。如需更多資訊,請參閱 CSS text-wrap: balance

瀏覽器支援

  • Chrome:114。
  • Edge:114。
  • Firefox:121。
  • Safari:17.4。

資料來源

CHIPS:具有獨立分區狀態的 Cookie

逐步淘汰第三方 Cookie 的一部分,CHIPS 可使用新的 Cookie 屬性 Partitioned,讓您選擇啟用第三方 Cookie 並按頂層網站劃分。Chrome 114 支援 CHIPS。

Popover API

Chrome 114 也提供 Popover API,可讓您更輕鬆地建構可在所有其他網頁應用程式 UI 上方顯示的暫時性使用者介面 (UI) 元素。

包括使用者互動元素,例如動作選單、表單元素建議、內容挑選器和教學 UI。

新的彈出式視窗屬性可讓任何元素自動顯示在頂層。這表示開發人員不必再擔心元素的定位、堆疊、焦點或鍵盤互動。

如要進一步瞭解,請參閱「推出彈出式視窗 API」一文。

瀏覽器支援

  • Chrome:114。
  • Edge:114。
  • Firefox:120。
  • Safari:17。

資料來源

Beta 版瀏覽器

瀏覽器 Beta 版可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前,您可以測試可能會影響網站的新功能或移除項目。最新 Beta 版包括 Firefox 114Chrome 115Safari 16.6。這些版本為平台帶來許多精彩功能。詳情請參閱版本資訊,以下僅列出幾項重點:

Chrome 115 為 CSS display 屬性提供多個值。也就是說,display: flex 會變成 display: block flexdisplay: block 會變成 display: block flow。單一值會保留為舊版關鍵字,一旦在 Chrome 穩定版中,這會讓多個值可供所有引擎使用。

此外,Chrome 115 版的 ScrollTimelineViewTimeline 擴充功能均適用於網路動畫規格。這些元素可透過 CSS 和 JavaScript 啟用捲動驅動動畫

Firefox 114 包含 WebTransport API,這是 WebSockets 的最新更新,可支援多個串流、單向串流和非順序傳送。

新手上路:網路系列