9 月初次使用網路平台

探索 2024 年 9 月推出的穩定版和 Beta 版網頁瀏覽器中,幾項有趣的功能。

2024 年 9 月,Firefox 130Safari 18Chrome 129 已穩定推出。這篇文章將介紹網站平台新增的功能。

Firefox 130 支援 <details> 元素的 name 屬性。這個群組會將 <details> 元素分組,其中群組內的元素只能一次開啟一個。這樣一來,您就能在不使用 JavaScript 的情況下,建立專屬的摺疊式選單。

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

動畫至自動 (以及更多)

Chrome 129 新增 CSS interpolate-size 屬性和 calc-size() 函式。

在可使用動畫的情況下,CSS interpolate-size 屬性可讓網頁選擇使用 CSS 內在大小設定關鍵字 (例如 automin-contentfit-content) 的動畫和轉場效果。

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox: not supported.
  • Safari: not supported.

Source

CSS calc-size() 函式是類似 calc() 的 CSS 函式,但也支援針對單一支援的大小設定關鍵字執行運算。支援的大小關鍵字為 automin-contentmax-contentfit-content

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox: not supported.
  • Safari: not supported.

Source

詳情請參閱「CSS 中的動畫效果至 height: auto; (和其他內在大小設定關鍵字)」一文。

在 JavaScript 中格式化時間長度

Chrome 129 也提供 Intl.DurationFormat,可用於格式設定持續時間,例如「1 小時 40 分鐘 30 秒」,並支援多種語言代碼。

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox Technology Preview: supported.
  • Safari: 16.4.

Source

WebCodecs API

Web Codecs API 現在支援 Firefox 130 的電腦版,讓網路開發人員可存取影片串流的個別影格和音訊區塊。新介面包括:VideoEncoderVideoDecoderEncodedVideoChunkVideoFrameVideoColorSpace。這個 API 尚未在 Firefox Android 中支援,因此無法提供 Baseline Newly,但 Android 版 Firefox Nightly 支援此 API。

Browser Support

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130.
  • Safari: 16.4.

Source

自訂資源的 CSS 樣式查詢

Safari 18 支援多項新功能,包括 CSS 樣式查詢。樣式查詢可讓您建立可重複使用的樣式,並以群組形式套用。例如,您有可重複使用的元件,且有多種變化。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

進一步瞭解 CSS 樣式查詢

相同文件檢視畫面的轉場效果

Safari 18 也支援 SPA 的相同文件檢視畫面轉場效果,讓您在應用程式的不同狀態之間建立視覺轉場效果。

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

進一步瞭解同一份文件的檢視畫面轉場效果

Beta 版瀏覽器

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

Firefox 131 包含新的 JavaScript 迭代器輔助程式,且現在已啟用 Cookie 具有獨立分區狀態 (CHIPS)

Chrome 130 支援 box-decoration-break: clone,可用於內嵌式分割 (行版面配置) 和區塊分割 (用於列印和多欄建立的片段)。IndexedDB 也提供更完善的錯誤回報功能,並為 Web Serial SerialPort 介面新增 connected 屬性。

Safari 18.1 版本修正了現有功能的錯誤。