探索 2023 年 7 月穩定版和 Beta 版網路瀏覽器提供的一些有趣功能。
穩定版瀏覽器
Firefox 115 和 Chrome 115 已於 2023 年 7 月穩定運作。本文將介紹對網路平台的影響。
CSS display
屬性有多個值
Chrome 115 包含多個 CSS display
屬性值。這表示 display: flex
會變為 display: block flex
,而 display: block
會變為 display: block flow
。單一值仍會保留為舊版關鍵字,這些值現在適用於三個主要引擎。
瀏覽器支援
- 115
- 115
- 70
- 15
捲動式動畫
此外,在 Chrome 115 中,還有網路動畫規格的 ScrollTimeline
和 ViewTimeline
擴充功能。這些產品可讓您透過 CSS 和 JavaScript 啟用捲動式動畫。
Privacy Sandbox API
Chrome 115 版推出 Privacy Sandbox 關聯性和評估 API。這包括 Topics、Protected Audience、Attribution Reporting、私密匯總、共用儲存空間和 Fenced Frames API。
如要進一步瞭解這些 API,請參閱 Privacy Sandbox 示範。
animation-composition
屬性
Firefox 115 支援 CSS animation-composition
屬性。讓這三個主要引擎都支援 animation-composition
。詳情請參閱指定如何利用動畫組合來結合多個動畫效果。
陣列方法
此外,與 Firefox 115 的互通性也是一組 Array
和 TypedArray
方法。Array.toReversed()
、Array.toSorted()
、Array.toSpliced()
、Array.with()
、TypedArrays.toReversed()
、TypedArrays.toSorted()
和 TypedArrays.with()
會傳回新的陣列,其中包含淺層複製的元素。
Beta 版瀏覽器版本
「Beta 版瀏覽器」可讓您預覽瀏覽器下一個穩定版本即將推出的功能。敬請把握這個大好機會,測試及移除哪些功能,以免影響網站在全球發布前受到影響。新的 Beta 版功能為 Firefox 116 和 Chrome 116。Safari 17 和 Safari 16.6 測試版仍在開發中。這些版本為 YouTube 平台帶來許多絕佳功能。請查看版本資訊,瞭解所有細節,以下只是其中幾項重點摘要。
除了 Android 以外,Firefox 116 在所有平台上都支援 Audio Output Devices API。這個 API 可讓網頁應用程式將音訊輸出重新導向至允許的藍牙耳機、擴音器或其他裝置,而不必使用瀏覽器或底層的 OS 預設值。
Chrome 116 包含 CSS Motion Path,允許任何圖形物件沿著開發人員指定的路徑以動畫呈現。這允許許多強大的新轉換可能,例如使用極座標 (搭配 ray()
函式) 進行定位,而非使用 translate()
函式使用的標準矩形座標,或是為已定義路徑上的元素建立動畫效果。這樣一來,就能更輕鬆地定義複雜且精美的 2D 空間轉場效果。路徑可指定為 circle()
、ellipse()
、rect()
、inset()
、xywh()
、polygon()
、ray()
和 url()
。
此外,Chrome 116 還提供 Document Picture-in-Picture API。這會啟用「一律開啟」視窗,該視窗可以填入任意 HTMLElement。這是以現有的 HTMLVideoElement API 為基礎,僅允許將 HTMLVideoElement 放入子母畫面 (PiP) 視窗中的元件。
網路新手系列叢書部分