網路平台 10 月新知

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

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

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

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

瀏覽器支援

  • Chrome:107。
  • Edge:107。
  • Firefox:66。
  • Safari: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 108Firefox 107Safari 16.2

Chrome 108 支援 CSS 分割屬性 break-beforebreak-afterbreak-insideavoid 值,可用於列印。這個值會告訴瀏覽器避免在套用元素之前、之後或內部中斷。舉例來說,下列 CSS 會避免使用者在分頁符號時損壞圖表。

figure {
    break-inside: avoid;
}

Chrome 108 開始推出對替換元素溢出行為的變更,這可能會在某些情況下導致視覺變化。請參閱「CSS 中已取代元素的溢位變更」一文,進一步瞭解如何解決您遇到的問題。

在 Android 裝置上,當螢幕小鍵盤顯示時,Chrome 版面配置視區的行為會有所變更。請參閱「為 Android 版 Chrome 即將推出的檢視區塊大小調整行為變更做好準備」,進一步瞭解如何準備下個月推出的穩定版。

Chrome 也提供新的 CSS 視窗單位。包括小 (svwsvhsvisvbsvminsvmax)、大 (lvwlvhlvilvblvminlvmax)、動態 (dvwdvhdvidvbdvmindvmax) 和邏輯 (vivb) 單位。這些單位已在 Firefox 和 Safari 中實作。

Firefox 107 啟用 COLRv1 字型支援功能,與 Chrome 一同支援這項字型技術。在字型方面,Chrome 108 也新增了對 font-tech()font-format() 函式的支援,以便使用 @supports 執行查詢。

Firefox 也開始支援 contain-intrinsic-size,加入 Chrome 後,就能支援這項功能。

Safari 16.2 Beta 版包含許多 CSS 修正項目,包括大小和捲動快照。

網路系列新作精選內容