網路平台 10 月新知

2022 年 10 月，我們在穩定版和 Beta 版網路瀏覽器中推出了幾項有趣的功能，歡迎一探究竟。

Rachel Andrew

穩定版瀏覽器

10 月，Firefox 106、Chrome 107 和 Safari 16.1 都已穩定推出。我們來看看這對網路平台有何影響。

格狀軌道的動畫

感謝 Microsoft 的貢獻者，Chrome 現可插補 grid-template-columns 和 grid-template-rows 值。也就是說，格線版面配置可以在狀態之間順利轉換，而不會在動畫或轉場效果的中途點貼齊。

將滑鼠游標懸停在圖像上，即可查看動畫。這個範例取自「CSS 動畫格狀版面配置」一文，您可以參考該文瞭解更多資訊。

瀏覽器支援

• 107
• 107
• 66
• 16

新增至「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 修正項目，包括大小和捲動快照。

網路系列新作精選內容