探索 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 修正項目,包括調整大小和捲動貼齊。
網路新手系列叢書部分