探索 2024 年 9 月期間,我們在穩定版和 Beta 版網路瀏覽器中推出的一些有趣功能。
穩定版瀏覽器版本
Firefox 130、Safari 18 和 Chrome 129 已於 2024 年 9 月穩定運作。本文介紹了網路平台新增的功能。
使用 name
屬性的專屬 Accordion,適用於 <details>
Firefox 130 支援 <details>
元素的 name
屬性。這個群組會將 <details>
元素分組,其中群組內的元素一次只能開啟一個。如此一來,您不必使用 JavaScript,就能建立專屬的摺疊式程式碼。
瀏覽器支援
建立自動動畫 (和其他功能)
Chrome 129 新增 CSS interpolate-size
屬性和 calc-size()
函式。
在可使用動畫的情況下,CSS interpolate-size
屬性可讓網頁選擇使用 CSS 內在大小設定關鍵字 (例如 auto
、min-content
和 fit-content
) 的動畫和轉場效果。
CSS calc-size()
函式是類似 calc()
的 CSS 函式,但也支援針對單一支援的大小設定關鍵字執行運算。支援的大小關鍵字為 auto
、min-content
、max-content
和 fit-content
。
詳情請參閱「CSS 中的動畫效果至 height: auto; (和其他內在大小設定關鍵字)」一文。
以 JavaScript 設定時間長度格式
Chrome 129 也提供 Intl.DurationFormat
,可用於格式設定時間長度,例如「1 小時 40 分鐘 30 秒」,並支援多種語言代碼。
WebCodecs API
Web Codecs API 現在支援 Firefox 130 的電腦版,讓網路開發人員可存取影片串流的個別影格和音訊區塊。新介面包括:VideoEncoder
、VideoDecoder
、EncodedVideoChunk
、VideoFrame
和 VideoColorSpace
。這個 API 尚未在 Firefox Android 中支援,因此無法提供 Baseline New 功能,但 Android 版 Firefox Nightly 支援這項功能。
自訂資源的 CSS 樣式查詢
Safari 18 支援多項新功能,包括 CSS 樣式查詢。樣式查詢可讓您建立可重複使用的樣式,並以群組形式套用。例如,您有可重複使用的元件,且有多種變化。
進一步瞭解 CSS 樣式查詢。
相同文件檢視畫面的轉場效果
Safari 18 也支援 SPA 的相同文件檢視畫面轉場效果,讓您在應用程式的不同狀態之間建立視覺轉場效果。
進一步瞭解同一份文件的檢視畫面轉場效果
Beta 版瀏覽器
Beta 版瀏覽器可讓您預覽下一個穩定版瀏覽器的功能。因此,現在當公開發布之前,建議您多多測試新功能或移除網站,以免影響您的網站。新的 Beta 版為 Firefox 131、Chrome 130 和 Safari 18.1。這些版本為平台帶來許多優異功能。詳情請參閱版本資訊。以下列舉其中幾項重點。
Firefox 131 包含新的 JavaScript 迭代器輔助程式,且現在已啟用 Cookie 具有獨立分區狀態 (CHIPS)。
Chrome 130 支援 box-decoration-break: clone
,可用於內嵌式分割 (行版面配置) 和區塊分割 (用於列印和多欄建立的片段)。IndexedDB 也提供更優質的錯誤報告,並為網路序列 SerialPort
介面新增 connected
屬性。
Safari 18.1 版本修正了現有功能的錯誤。