網路平台 11 月新上架

2022 年 11 月，我們在穩定版和 Beta 版網路瀏覽器中推出了幾項有趣的功能，歡迎一探究竟。

Rachel Andrew

穩定版瀏覽器

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 中實作，也就是說，我們現在已針對這些單位在三個主要瀏覽器引擎中實現互通性。

請參閱「大型、小型和動態視窗單元」。

瀏覽器支援

  • Chrome：108。
  • Edge：108。
  • Firefox：101。
  • Safari：15.4。

Firefox 107 支援 contain-intrinsic-size 簡寫 CSS 屬性，以及長寫 contain-intrinsic-width、contain-intrinsic-height 和邏輯屬性 contain-intrinsic-block-size 和 contain-intrinsic-inline-size。

這些屬性會用來指定受限於大小容納的 UI 元素大小。這樣一來，使用者代理程式就能判斷元素的大小，而不需要轉譯其子項元素。當元素受到大小限制時，這些元素就相當實用。

瀏覽器支援

  • Chrome：83。
  • Edge：83。
  • Firefox：107。
  • Safari：17。

資料來源

支援 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 版仍在進行中。

當 Firefox 108 是 <picture> 元素的子項時，Firefox 108 可支援 <source> 元素的 height 和 width 屬性。這些屬性會接受圖片的高度或寬度 (以像素為單位)，做為不含單位的整數。

Firefox 正在實作容器查詢。在 Firefox 108 Beta 版的 layout.css.container-queries.enabled 標記後方，您會看到容器查詢長度單位：cqw、cqh、cqi、cqb、cqmin、cqmax。這些是相對於查詢容器大小的長度單位。

新手上路：網路系列