探索 2022 年可以互通的部分功能。
我們在另一年來到尾聲,現在則應該檢視瀏覽器改良後,看看我們如何攜手改善網路平台的互通性。您可以前往今年 3 月的貼文,瞭解這項計畫如何開始實施。
年底的整體分數在所有引擎上都具有顯著進步。
這篇文章會說明您在 2022 年達成的進度。除了這些頭條功能外,所有引擎也大幅改善了各種效能。我們已修正會導致引擎之間不一致和開發期間延遲的小問題。看到跨瀏覽器可用功能無比令人振奮,但這種小細節有時仍然造成最嚴重的問題,而且我們很高興能看到這些改善。
串聯圖層
Cascade 圖層可讓您將選取器分組成多個圖層,藉此管理階層結構。這類功能只有在支援所有國家/地區時,才會開始運作。所有主要的引擎現在皆支援層疊式圖層,而且所有瀏覽器的分數都會反映這項功能的互通性,只需花幾個測試在 Firefox 中就能通過測試。
對話方塊元素
對話方塊元素可讓您建立強制回應和非強制回應對話方塊。這是網路上的常見模式,使用此元素可提供可用性和無障礙功能,因此您在建立自己的元件時,就必須進行開發和測試。在「建立對話方塊元件」一文中,Adam Argyle 說明如何以這個元素為基礎建構各種對話方塊。
子網格
2022 年初,唯一支援 grid-template-rows
和 grid-template-columns
為 subgrid
值的瀏覽器是 Firefox。Safari 已在 2022 年推出,這項功能仍在開發中。雖然年末簽署的期限已過,但互通性即將到來。
可視區域單元
可視區域單元是唯一能在所有引擎中通過 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 提供。