所有主要瀏覽器廠商和其他利害關係人，都是第一次合作解決網頁程式開發人員最常發現的瀏覽器相容性問題。互通性 2022 年將在 15 個重要領域，改善網路開發體驗。本文將介紹我們如何達成這項目標、專案的重點、衡量方式，以及如何追蹤進度。
一切始於 2019 年
2019 年，Mozilla、Google 和其他機構在 2019 年間投入了大力，透過 MDN 開發人員需求評估問卷調查和深入探究的瀏覽器相容性報告，瞭解開發人員面臨的問題。這些報告提供詳細的可行資訊，可協助我們解決網路平台開發人員面臨的重大挑戰，而這些報告也推動了 Compat 2021 的努力。
除此之外，Compat 2021 還奠定了穩固基礎，提供更強大的功能，例如 CSS 格線 (12% 用量和穩定成長) 和 CSS Flbox (用量持續 77%)，包括 Flexbox 中的 gap 屬性，讓開發人員在採用新的版面配置方法時，能解決最大的痛點。
很高興能在 2021 年底，在所有實作項目中獲得超過 90%的分數！
什麼是互通性 2022？
2022 年互通性是一項基準，由三種主要瀏覽器實作項目的代表達成協議，發展出經過公開提名，並與支持者 Apple、Bocoup、Google、Igalia、Microsoft 和 Mozilla 的意見進行審查。
這項基準只著重在 15 個方面，經開發人員認定，在缺少瀏覽器或瀏覽器有相容性問題時，是特別棘手的問題。所有瀏覽器供應商都同意將重心放在這些方面，而參與討論的每個人都迫不及待想開始改善網路開發的體驗。
關注的 15 個領域
下列功能將成為 2022 年互通性的重點功能。包括 10 個新區域，以及 5 個在 Compat 2021 年間轉移的 5 個區域。新的重點領域如下：
串聯圖層
Cascade 層可讓網頁開發人員進一步控制 Cascade。這些選取器可用來將選取器分組至多個圖層，每個圖層都有各自的專屬性。也就是說，您不需要謹慎排序選取器，或建立高度明確的選取器來覆寫基本 CSS 規則。
色域與 CSS 顏色函式
如要在設計系統中使用色彩函式，您目前需仰賴 Sass、PostCSS 或 calc() 的 HSL 值。CSS 內建色彩函式代表可以動態更新顏色，而新的色彩空間則能消除 sRGB 色域的限制和 HSL 的感知限制。
CSS 色彩等級 5 中定義的兩個函式可在網路平台上啟用更動態的主題設定：
color-mix()：使用兩個顏色，並傳回在指定色域中混用指定電量的結果。color-contrast()：從顏色清單中選取所需顏色，該顏色對指定單色的對比度最高。
這些函式支援擴充的色彩空間 (LAB、LCH 和 P3)，除了 HSL 和 sRGB 以外，這些函式預設使用統一的 LCH 色域。
新的可視區域單元
在 2020 年 MDN 瀏覽器相容性報告和新的 CSS 2021 現況問卷調查中，處理可視區域大小的困難度便顯而易見。CSS 值和單元 4 層級 新增單元，適用於最大、最小和動態的可視區域大小、lv*、sv* 和 dv*。這些單元可讓您輕鬆建立能填滿行動裝置可視區域的版面配置，同時將網址列納入考量。
此外，「2022 年互通性」幕後的跨供應商團隊將攜手研究及改善現有可視區域評估功能 (包括現有的 vh 單位) 的互通性。
捲動
2021 年捲動問卷調查報告指出，捲動功能和捲動相容性是難以導入的，而且有許多改善空間。我們會著重於捲動貼齊、捲動行為和過度捲動行為，協助不同平台捲動畫面更加一致且順暢。
我們也正在探索新的捲動貼齊功能提案。
子網格
grid-template-columns 和 grid-template-rows 的 subgrid 值表示套用 display: grid 的格線項目，可沿用父項網格部分的軌跡定義。
舉例來說，以下三個資訊卡元件都有標題和頁尾，與相鄰的卡片頁首和頁尾對齊，即使每張資訊卡各有獨立的格狀檢視畫面。這個模式之所以有效，是因為每張資訊卡都是橫跨父項格線的三列項目，然後使用子格線將這一列沿用到資訊卡。
其他服務
- CSS 包含 (
contain屬性) <dialog>元素- 表單控制項
- 字體排版和編碼：包括
font-variant-alternates、font-variant-position、ic單位和 CJK 文字編碼 - Web Compat：著重於造成網站相容性問題並對使用者造成影響的瀏覽器之間的差異
透過 Compat 2021 專案，以下領域獲得了重大進展，但仍有改善空間。因此，這些功能已納入協同整合服務 2022 中，以便解決其餘問題。
- 顯示比例
- 彈性凸版
- 格線
- 固定式定位
- 轉換
調查工作
除了 15 個重點領域， Interop 2022 還包含三項調查工作。這些是有問題且需要改善的領域，但目前的規格或測試狀態仍不足，無法透過測試結果為進度評分：
- 編輯，
contenteditable，execCommand - 指標和滑鼠事件
- 可視區域評估
瀏覽器供應商和其他相關人員將合作改善這些領域的測試和規格，以便在未來的版本中納入。
評估成效及追蹤進度
接著，我們會使用現有的 Web-platform-tests 資訊主頁追蹤在 15 個重點領域的進度。每個領域都有一組測試。之後，瀏覽器會針對這些測試進行評分，並給予各領域的分數以及整體 15 個區域的整體分數。
如要追蹤及追蹤進度，請前往 Interop 2022 資訊主頁。在這一年中，
這對開發人員有何影響？
這些合作計畫的目標，是以 Compat 2021、 Interop 2022 等數年來完成多年的互通性工作，目的在於充分瞭解及解決開發人員多年來經歷過的痛點。而且不需要逐一調整。更重要的是，讓所有的主要瀏覽器廠商與朋友通力合作，從而改善網絡平台。
基本上，我們的目標是讓網路平台更容易使用且更可靠，以便開發人員投入更多時間打造優質網頁體驗，而不必費心解決瀏覽器不一致的問題。
分享寶貴意見
如果您對 Compat 2021 期間或 2022 年互通性功能所做的任何改善有任何意見，歡迎與我們分享。下列哪些功能對你的工作最有幫助？你最期待的是什麼？回報 GitHub 存放區的問題，或是透過 Twitter 與我們聯絡。
進一步瞭解 2022 年協同整合：