網路平台 11 月新上架

瞭解 2022 年 11 月推出的穩定版和 Beta 版網頁瀏覽器中,有哪些有趣的功能。

11 月,Firefox 107Chrome 108 穩定版推出。讓我們來看看這對網頁平台有何影響。

在 Android 裝置上,當螢幕小鍵盤顯示時,版面配置視區的行為會與 Chrome 108 不同。如需更多資訊,請參閱「為 Android 版 Chrome 即將實施的檢視區塊大小調整行為變更做好準備」。

Chrome 108 也推出了新的 CSS 視窗單位。包括小 (svwsvhsvisvbsvminsvmax)、大 (lvwlvhlvilvblvminlvmax)、動態 (dvwdvhdvidvbdvmindvmax) 和邏輯 (vivb) 單位。這些單位已在 Firefox 和 Safari 中實作,也就是說,我們現在已針對這些單位在三個主要瀏覽器引擎中實現互通性。

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

瀏覽器支援

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

Firefox 107 支援 contain-intrinsic-size 簡寫 CSS 屬性,以及長寫 contain-intrinsic-widthcontain-intrinsic-height 和邏輯屬性 contain-intrinsic-block-sizecontain-intrinsic-inline-size

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

瀏覽器支援

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

資料來源

支援 CSS 分割 avoid 關鍵字

Chrome 108 支援 CSS 分割屬性 break-beforebreak-afterbreak-insideavoid 值,可用於列印。這個值會告訴瀏覽器避免在套用元素之前、之後或內部中斷。舉例來說,下列 CSS 可避免圖片在分頁處中斷。

figure {
    break-inside: avoid;
}

這項新增功能是因為使用 LayoutNG 加入了列印支援功能,可提供更現代、更少錯誤的體驗。進一步瞭解 LayoutNG

Federated Credential Management API

Federated Credential Management API (FedCM) 可為網頁上的聯合身分流程提供抽象概念。這項 API 會提供瀏覽器中介對話方塊,讓使用者從識別資訊提供者中選擇帳戶,以便登入網站。FedCM 已在 Chrome 108 中推出,如要進一步瞭解相關資訊,請參閱 FedCM 公告網誌文章

Beta 版瀏覽器

測試版瀏覽器可讓您預覽瀏覽器下一個穩定版的內容。在正式發布前,您可以測試可能會影響網站的新功能或移除項目。由於發布日期的關係,本月唯一的新 Beta 版為 Firefox 108Safari 16.2 Beta 版仍在進行中。

Firefox 108 支援 <source> 元素的 heightwidth 屬性,前提是該元素為 <picture> 元素的子項。這些屬性會接受圖片的高度或寬度 (以像素為單位),做為不含單位的整數。

Firefox 正在實作容器查詢。在 Firefox 108 Beta 版的 layout.css.container-queries.enabled 標記後方,您會看到容器查詢長度單位:cqwcqhcqicqbcqmincqmax。這些是相對於查詢容器大小的長度單位。

新手上路:網路系列