探索 2022 年 11 月穩定版和 Beta 版網路瀏覽器提供的一些有趣功能。
穩定版瀏覽器
11 月，Firefox 107 和 Chrome 108 已變成穩定版。一起來看看這對網路平台的影響。
Android 版 Chrome 的版面配置可視區域行為變更
在 Android 108 顯示螢幕小鍵盤時，版面配置可視區域在 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 中導入，這表示我們現在可以在三大瀏覽器引擎上對這些單元進行互通性。
請參閱「大型、小型和動態可視區域單元」。
瀏覽器支援
- 108
- 108
- 101
- 15.4
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) 可為網路上的聯合身分流程提供抽象化機制。該元件會顯示瀏覽器中介對話方塊，可讓使用者從辨識供應商中選擇帳戶，以登入網站。FedCM 將在 Chrome 108 推出，詳情請參閱 FedCM 公告網誌文章。
Beta 版瀏覽器版本
「Beta 版瀏覽器」可讓您預覽瀏覽器下一個穩定版本即將推出的功能。敬請把握這個大好機會，測試及移除哪些功能，以免影響網站在全球發布前受到影響。根據發布日期，本月唯一新的 Beta 版是 Firefox 108，包括 Safari 16.2 Beta 版。
如果是 <picture> 元素的子項，Firefox 108 支援 <source> 元素的 height 和 width 屬性。這些屬性接受圖片的高度或寬度 (以像素為單位)，當做沒有單位的整數。
Firefox 將著手實作容器查詢。在 Firefox 108 Beta 版中的 layout.css.container-queries.enabled 旗標後方，您會看見容器查詢長度單位：cqw、cqh、cqi、cqb、cqmin、cqmax。這些是相對於查詢容器大小的長度單位。
網路新手系列叢書部分