探索 2022 年 10 月穩定版和 Beta 版網路瀏覽器提供的一些有趣功能。
穩定版瀏覽器
Firefox 106、Chrome 107 和 Safari 16.1 已成為穩定版。一起來看看這對網路平台的影響。
格線軌動畫
感謝 Microsoft 貢獻者的協助，Chrome 現在可以插入 grid-template-columns 和 grid-template-rows 的值。也就是說，格線版面配置能夠在狀態之間流暢地轉換，而不是在動畫或轉換的一半點貼齊。
瀏覽器支援
- 107
- 107
- 66
- 16
新增至 getDisplayMedia()
此外，Chrome 還增添了 getDisplayMedia() 的新增功能，旨在避免分享螢幕畫面時不慎過度分享。
displaySurface選項可指出網頁應用程式偏好提供特定的顯示介面類型 (分頁、視窗或螢幕)。surfaceSwitching選項可指定 Chrome 是否應允許使用者動態切換共用分頁。selfBrowserSurface選項可用來禁止使用者分享目前的分頁。這可避免「鏡射效應」效果。systemAudio選項可確保 Chrome 只為使用者提供相關音訊擷取內容。
Safari 16.1 還支援 getDisplayMedia，且開始支援擷取特定 Safari 視窗。
測試 CSS 的字型技術與功能支援
Firefox 已新增 font-tech() 和 font-format() 函式，以使用 @supports 進行功能查詢。以下範例會測試是否支援 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。這個範例使用 Push API 和 Notifications API，詳情請參閱「Meet 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 版 Google 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 字型，並加入 Google Chrome 來支援這種字型技術。此外，Chrome 108 也在字型中新增 font-tech() 和 font-format() 函式的支援，以使用 @supports 進行特徵查詢。
Firefox 也額外新增 contain-intrinsic-size 支援功能，加入 Chrome 的行列，藉此支援這項功能的兩個瀏覽器。
Safari 16.2 Beta 版包含許多 CSS 修正項目，包括調整大小和捲動貼齊。
網路新手系列叢書部分