2022 年互通性更新:年終更新

以下列舉幾個在 2022 年開始互通的功能。

到今年年底前,我們已來談談瀏覽器改善了哪些功能,共同改善網路平台的互通性。請參閱這項計畫在今年 3 月發布的貼文,瞭解公司如何開始參與計畫。

顯示 Chrome 和 Edge Dev 版本 71 的分數,Firefox 版本為 74 的 Firefox,以及 73 的 Safari 技術預覽版。
2022 年 3 月,實驗性瀏覽器的分數。

年底的整體分數在所有引擎上都呈現顯著的提升。

Chrome 和 Edge Dev 的費用為 90、Firefox Nightly,89 版本,Safari Technology Preview 是 94。
2022 年 12 月,實驗性瀏覽器的分數。

這篇文章將說明 2022 年的進展。除了這些標題功能外,所有引擎也進一步小幅改善。先前可能造成引擎之間不一致,並在開發過程中遇到瓶頸的小問題已經解決。很高興看到可跨瀏覽器使用的強大功能,但有時難免會成為最嚴重的問題。此外,我們也樂見其持續改進。

串聯圖層

階層式圖層可讓您將選取器分組為多個圖層,藉此管理串聯畫面。這種功能只有在全球都受到支援時才會派上用場。所有主要引擎現在支援串聯圖層,且所有瀏覽器上的分數均反映出這項功能的互通性,只不過需要再做幾項 Firefox 測試即可。

瀏覽器支援

  • 99
  • 99
  • 97
  • 15.4

資料來源

對話方塊元素

對話方塊元素可讓您建立強制回應和非強制回應對話方塊。這是網路上常見的模式,只要使用這個元素,您就可以輕鬆開發及測試自己建立元件時必須開發和測試的元素。在「建構對話方塊元件」一文中,Adam Argyle 說明如何以這個元素為基礎,建構不同類型的對話方塊。

瀏覽器支援

  • 37
  • 79
  • 98
  • 15.4

資料來源

子類別

2022 年初,只有 Firefox 支援 grid-template-rowsgrid-template-columnssubgrid 值。在 2022 年期間,Safari 便已納入支援範圍,而 Chrome 的這項功能仍在開發中。本年度的協同合作能力即將截止,敬請把握時間。

瀏覽器支援

  • 117
  • 117
  • 71
  • 16

資料來源

可視區域單元

可視區域單元是唯一在所有引擎中通過 100% 測試的功能。其中也包括大小可視區域的概念,考量到裝置上 UI 元素出現及消失時的可視區域大小變化。如要進一步瞭解這些單元,請參閱「大型、小型和動態可視區域單元」一文。

瀏覽器支援

  • 108
  • 108
  • 101
  • 15.4

顏色 4

這種色彩工作不僅可讓 CSS 指定較高定義色域 (例如顯示 p3、rec2020) 的顏色,還能提供新的色彩函式,讓每個色彩函式都具有可處理色彩的專屬公用程式。新的色域有 lch()oklch()lab()oklab()display-p3rec2020a98-rgbprophoto-rgbxyzxyz-d50xzy-d65在 Canary 中試用這些功能 (只要啟用這個旗標即可)。這些變更也適用於漸層,可讓作者指定漸層使用的色域。相同旗標也會啟用 color-mix() 支援,讓您在自選空間中混合兩種顏色。color-mix() 函式在 Safari 和 Firefox 中也會有標記的後面。更多色彩、更佳的顏色、漸層效果更佳,以及更好的工具。

2023 年互通性

希望你也很高興得知,我們沒有打算在 2022 年底結束,而 Interop 2023 也已順利完成初步規劃。我們將在新年中公布已選取的功能,並期盼新的一年能協助大家更輕鬆地開發網路。

主頁橫幅由 Ian Schneider 提供。