瞭解 2022 年 11 月推出的穩定版和 Beta 版網頁瀏覽器中,有哪些有趣的功能。
穩定版瀏覽器
11 月,Firefox 107 和 Chrome 108 穩定版推出。讓我們來看看這對網頁平台有何影響。
Android 版 Chrome 的版面配置可視區域行為有所變更
在 Android 裝置上,當螢幕小鍵盤顯示時,版面配置視區的行為會與 Chrome 108 不同。如需更多資訊,請參閱「為 Android 版 Chrome 即將實施的檢視區塊大小調整行為變更做好準備」。
新的可視區域單位
Chrome 108 也推出了新的 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 支援 contain-intrinsic-size
簡寫 CSS 屬性,以及長寫 contain-intrinsic-width
、contain-intrinsic-height
和邏輯屬性 contain-intrinsic-block-size
和 contain-intrinsic-inline-size
。
這些屬性會用來指定受限於大小容納的 UI 元素大小。這樣一來,使用者代理程式就能在不需轉譯子項元素的情況下,判斷元素的大小。當元素受到大小限制時,這些元素就相當實用。
支援 CSS 分割 avoid
關鍵字
Chrome 108 支援 CSS 分割屬性 break-before
、break-after
和 break-inside
的 avoid
值,可用於列印。這個值會告訴瀏覽器避免在套用元素之前、之後或內部中斷。舉例來說,下列 CSS 可避免圖片在分頁處中斷。
figure {
break-inside: avoid;
}
這項新增功能是因為使用 LayoutNG 加入了列印支援功能,可提供更現代、更少錯誤的體驗。進一步瞭解 LayoutNG。
Federated Credential Management API
Federated Credential Management API (FedCM) 可為網頁上的聯合身分流程提供抽象概念。這項 API 會提供瀏覽器中介對話方塊,讓使用者從識別資訊提供者中選擇帳戶,以便登入網站。FedCM 已在 Chrome 108 中推出,如要進一步瞭解相關資訊,請參閱 FedCM 公告網誌文章。
Beta 版瀏覽器
測試版瀏覽器可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前,您可以測試可能會影響網站的新功能或移除項目。由於發布日期的關係,本月唯一的新 Beta 版為 Firefox 108,Safari 16.2 Beta 版仍在進行中。
Firefox 108 支援 <source>
元素的 height
和 width
屬性,前提是該元素為 <picture>
元素的子項。這些屬性會接受圖片的高度或寬度 (以像素為單位),做為不含單位的整數。
Firefox 正在實作容器查詢。在 Firefox 108 Beta 版的 layout.css.container-queries.enabled
標記後方,您會看到容器查詢長度單位:cqw
、cqh
、cqi
、cqb
、cqmin
、cqmax
。這些是相對於查詢容器大小的長度單位。