瞭解 2022 年 10 月推出的穩定版和 Beta 版網頁瀏覽器中,有哪些有趣的功能。
穩定版瀏覽器
10 月,Firefox 106、Chrome 107 和 Safari 16.1 都已穩定推出。讓我們來看看這對網頁平台有何影響。
格狀軌道的動畫
感謝 Microsoft 的貢獻者,Chrome 現在可以插補 grid-template-columns
和 grid-template-rows
值。也就是說,格線版面配置可以在狀態之間順利轉換,而不會在動畫或轉場效果的中途點貼齊。
瀏覽器支援
新增至 getDisplayMedia()
Chrome 也針對 getDisplayMedia()
新增了一些功能,目的是避免在分享螢幕畫面時意外分享過多內容。
displaySurface
選項可指出網頁應用程式偏好提供特定的顯示介面類型 (分頁、視窗或螢幕)。surfaceSwitching
選項會指出 Chrome 是否應允許使用者動態切換共用分頁。- 您可以使用
selfBrowserSurface
選項,禁止使用者分享目前分頁。這樣可避免產生「鏡廳」效果。 systemAudio
選項可確保 Chrome 只向使用者提供相關的音訊擷取內容。
Safari 16.1 也支援 getDisplayMedia
,可擷取特定 Safari 視窗。
測試 CSS 支援的字型技術和功能
Firefox 已在 @supports
中新增 font-tech()
和 font-format()
函式,以便使用功能查詢。以下範例會測試是否支援 COLRv1 字型。
@supports font-tech(color-COLRv1) {
}
如需更多範例,請參閱 MDN。
捲動至特定文字片段
Safari 16.1 支援捲動至文字片段,可讓您透過指定的特定文字片段前往網址。
AVIF 支援
Safari 16 支援靜態 AVIF 圖片,Safari 16.1 則支援 macOS Ventura、iOS 16 和 iPadOS 16 上的動態 AVIF 圖片。
Safari 適用的網路推播
Safari 16.1 為 macOS Ventura 上的 Safari 提供 Web Push 支援。這項功能會使用 Push API 和 Notifications API,如要進一步瞭解,請參閱「認識網路推送」一文。Web Push 在 Safari 中的登陸頁面,表示這項功能現在已支援所有三個主要引擎。
Beta 版瀏覽器
瀏覽器 Beta 版可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前,您可以測試可能會影響網站的新功能或移除項目。本月推出的新版 Beta 版為 Chrome 108、Firefox 107 和 Safari 16.2。
Chrome 108 支援 CSS 分割屬性 break-before
、break-after
和 break-inside
的 avoid
值,可用於列印。這個值會告訴瀏覽器避免在套用元素之前、之後或內部中斷。舉例來說,下列 CSS 可避免圖片在分頁處中斷。
figure {
break-inside: avoid;
}
Chrome 108 開始推出對替換元素溢位行為的變更,這可能會在某些情況下導致視覺變化。請參閱「CSS 中已取代元素的溢位變更」一文,進一步瞭解如何解決您遇到的問題。
在 Android 裝置上,當螢幕小鍵盤顯示時,Chrome 的版面配置視區的運作方式有所變更。請參閱「為 Android 版 Chrome 即將推出的檢視區域大小調整行為變更做好準備」,進一步瞭解如何準備下個月推出的穩定版。
Chrome 也提供新的 CSS 視窗單位。包括小 (svw
、svh
、svi
、svb
、svmin
、svmax
)、大 (lvw
、lvh
、lvi
、lvb
、lvmin
、lvmax
)、動態 (dvw
、dvh
、dvi
、dvb
、dvmin
、dvmax
) 和邏輯 (vi
、vb
) 單位。這些單位已在 Firefox 和 Safari 中實作。
Firefox 107 啟用 COLRv1 字型支援功能,加入 Chrome 的行列,支援這項字型技術。在字型方面,Chrome 108 也新增了對 font-tech()
和 font-format()
函式的支援,可透過 @supports
執行功能查詢。
Firefox 也加入了 contain-intrinsic-size
支援功能,與 Chrome 一同成為支援這項功能的兩大瀏覽器。
Safari 16.2 Beta 版包含許多 CSS 修正項目,包括大小和捲動快照。