以下列舉幾個在 2022 年開始互通的功能。
到今年年底前,我們已來談談瀏覽器改善了哪些功能,共同改善網路平台的互通性。請參閱這項計畫在今年 3 月發布的貼文,瞭解公司如何開始參與計畫。
![顯示 Chrome 和 Edge Dev 版本 71 的分數,Firefox 版本為 74 的 Firefox,以及 73 的 Safari 技術預覽版。](https://web.dev/static/blog/interop-2022-wrapup/image/scores-showing-chrome-ed-e0480390ad6a.png?authuser=7&hl=zh-tw)
年底的整體分數在所有引擎上都呈現顯著的提升。
![Chrome 和 Edge Dev 的費用為 90、Firefox Nightly,89 版本,Safari Technology Preview 是 94。](https://web.dev/static/blog/interop-2022-wrapup/image/scores-showing-chrome-ed-67b24fea086da.png?authuser=7&hl=zh-tw)
這篇文章將說明 2022 年的進展。除了這些標題功能外,所有引擎也進一步小幅改善。先前可能造成引擎之間不一致,並在開發過程中遇到瓶頸的小問題已經解決。很高興看到可跨瀏覽器使用的強大功能,但有時難免會成為最嚴重的問題。此外,我們也樂見其持續改進。
串聯圖層
階層式圖層可讓您將選取器分組為多個圖層,藉此管理串聯畫面。這種功能只有在全球都受到支援時才會派上用場。所有主要引擎現在支援串聯圖層,且所有瀏覽器上的分數均反映出這項功能的互通性,只不過需要再做幾項 Firefox 測試即可。
對話方塊元素
對話方塊元素可讓您建立強制回應和非強制回應對話方塊。這是網路上常見的模式,只要使用這個元素,您就可以輕鬆開發及測試自己建立元件時必須開發和測試的元素。在「建構對話方塊元件」一文中,Adam Argyle 說明如何以這個元素為基礎,建構不同類型的對話方塊。
子類別
2022 年初,只有 Firefox 支援 grid-template-rows
和 grid-template-columns
的 subgrid
值。在 2022 年期間,Safari 便已納入支援範圍,而 Chrome 的這項功能仍在開發中。本年度的協同合作能力即將截止,敬請把握時間。
可視區域單元
可視區域單元是唯一在所有引擎中通過 100% 測試的功能。其中也包括大小可視區域的概念,考量到裝置上 UI 元素出現及消失時的可視區域大小變化。如要進一步瞭解這些單元,請參閱「大型、小型和動態可視區域單元」一文。
瀏覽器支援
- 108
- 108
- 101
- 15.4
顏色 4
這種色彩工作不僅可讓 CSS 指定較高定義色域 (例如顯示 p3、rec2020) 的顏色,還能提供新的色彩函式,讓每個色彩函式都具有可處理色彩的專屬公用程式。新的色域有 lch()
、oklch()
、lab()
、oklab()
、display-p3
、rec2020
、a98-rgb
、prophoto-rgb
、xyz
、xyz-d50
、xzy-d65
:在 Canary 中試用這些功能 (只要啟用這個旗標即可)。這些變更也適用於漸層,可讓作者指定漸層使用的色域。相同旗標也會啟用 color-mix()
支援,讓您在自選空間中混合兩種顏色。color-mix() 函式在 Safari 和 Firefox 中也會有標記的後面。更多色彩、更佳的顏色、漸層效果更佳,以及更好的工具。
2023 年互通性
希望你也很高興得知,我們沒有打算在 2022 年底結束,而 Interop 2023 也已順利完成初步規劃。我們將在新年中公布已選取的功能,並期盼新的一年能協助大家更輕鬆地開發網路。
主頁橫幅由 Ian Schneider 提供。