網路平台 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 為 macOS Ventura 上的 Safari 提供 Web Push 支援。這項功能會使用 Push API 和 Notifications API,如要進一步瞭解,請參閱「認識網路推送」一文。Web Push 在 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 修正項目,包括大小和捲動快照。

新手上路:網路系列