9 月初次使用網路平台

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

Rachel Andrew

穩定版瀏覽器版本

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

使用「<details>」的 name 屬性專屬指示

Firefox 130 支援 <details> 元素的 name 屬性。這個群組 <details> 元素，其中的單一元素只能在 讓應用程式從可以最快做出回應的位置 回應使用者要求這樣一來，您就能在不使用 JavaScript 的情況下，建立專屬的摺疊式選單。

瀏覽器支援

  • Chrome：120。
  • Edge：120。
  • Firefox：130。
  • Safari：17.2。

建立自動動畫 (和其他功能)

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

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

瀏覽器支援

  • Chrome：129。
  • Edge：不支援。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

CSS calc-size() 函式是與 calc() 類似的 CSS 函式，但它是 也支援僅一個支援的尺寸關鍵字。 支援的大小關鍵字為 auto、min-content、max-content 和 fit-content。

瀏覽器支援

  • Chrome：129。
  • Edge：129。
  • Firefox：不支援。
  • Safari：不支援。

資料來源

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

以 JavaScript 設定時間長度格式

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

瀏覽器支援

  • Chrome：129。
  • Edge：129。
  • Firefox：不支援。
  • Safari：16.4。

資料來源

WebCodecs API

Web Codecs API 現在支援 Firefox 130 的電腦版，讓網路開發人員可存取影片串流的個別影格和音訊區塊。新介面包括：VideoEncoder、VideoDecoder、EncodedVideoChunk、VideoFrame 和 VideoColorSpace。這個 API 不夠 由於 Firefox Android 尚未支援 Baseline Newly， 不過，Firefox 夜間支援 Android。

瀏覽器支援

  • Chrome：94。
  • Edge：94。
  • Firefox：130。
  • Safari：16.4。

資料來源

自訂資源的 CSS 樣式查詢

Safari 18 支援多項新功能，包括 CSS 樣式查詢。樣式查詢可讓您建立可重複使用的樣式，並將其套用為 群組。舉例來說，假如您有一個包含多個變化版本的可重複使用元件，

瀏覽器支援

  • Chrome：111.
  • Edge：111。
  • Firefox：不支援。
  • Safari：18。

資料來源

進一步瞭解 CSS 樣式查詢：

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

Safari 18 也支援相同文件檢視模式，但適用於 SPA、 可讓您在應用程式的不同狀態之間建立視覺轉場效果

瀏覽器支援

  • Chrome：111。
  • Edge：111。
  • Firefox：不支援。
  • Safari：18。

資料來源

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

Beta 版瀏覽器版本

Beta 版瀏覽器可讓您預覽即將推出的功能 瀏覽器的穩定版。在正式發布前，您可以測試可能影響網站的新功能或移除項目。新的 Beta 版為 Firefox 131、Chrome 130 和 Safari 18.1。這些版本為平台帶來許多實用功能。 查看版本資訊，瞭解所有詳細資訊。以下先舉一些例子： 重點摘要

Firefox 131 具備新的 JavaScript 疊代器輔助程式 和 已啟用具有獨立分區狀態 (CHIPS) 的 Cookie。

Chrome 130 同時支援 box-decoration-break: clone 的內嵌功能 分割 (行版面配置) 和區塊分割 (為 列印和多欄作業)。IndexedDB 中的 Error Reporting 還有更好的 和網路序列 SerialPort 介面的新 connected 屬性。

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