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 將 Web Push 支援功能導入 macOS Ventura 上的 Safari。這項功能會使用 Push API 和 Notifications API,如要進一步瞭解,請參閱「認識網路推送」一文。在 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 修正項目,包括大小和捲動快照。
網路系列新作精選內容