從 Compat 2021 到 Interop 2022

導言 - Lead paragraph

內文為學習筆記整理，多為英翻中統整的資訊。

下面將會介紹一下，關於 Compat 2021 與 Interop 2022 是什麼？發生了什麼事？以及最重要的是幹了什麼大事？

讓我們先談談它們和 CSS 版本的迭代有什麼關係？為什麼不像其他語言一樣大版本或小版本的更新呢？為什麼一直卡在 CSS3，明明已在 CSS3 版本上進行了很長一段時間的發展，但遲遲沒有出現 CSS4、CSS5，又或是 CSS3.1、CSS3.3 或 CSS3.5 等等？

Why won't there be CSS4?

這背後有一些原因：

模塊化發展： CSS3 被設計為一個模塊化的標準，它將不同的功能分成了許多小的 module，這使得可獨立地開發和推出這些功能，而不必等待整個 CSS4 標準完成。這種模塊化的方法讓 Web 開發者可以根據需求逐步引入新功能，而不必等待整個新版本的發布。
持續演進：在 CSS3 之後，CSS 標準的演進變得更加持續和動態。新的功能和改進可通過 CSS 模塊的形式進行添加，而不必等待完整版本的發布。這使得 Web 開發者能夠更迅速地使用新的技術和特性。
版本號的變化：新的 CSS 功能和改進被稱為 CSS4 的一部分，但官方標準文件可能更傾向於將這些功能稱為 CSS Level X（例如: CSS Level 4 Selectors）。這種命名方式反映了持續演進的思維，而不是傳統意義上的 "CSS4" 這樣的版本號。

What are Compat 2021 and Interop 2022?

Compat (Compatibility 兼容性)
Interop (interoperability 互操作性)

官方解釋：
The terms "compatibility" and "interoperability" are typically distinguished by browser vendors, where compat refers to site compat, and interop refers to two or more browsers behaving the same. In that terminology,this effort is about interoperability and so the project has aligned with that naming.

一一 Rachel Andrew, Robert Nyman, Philip Jägenstedt, Interop 2022: browsers working together to improve the web for developers

中文翻譯： "compatibility" 和 "interoperability" 這兩個術語通常由瀏覽器供應商所區分，其中 "compat" 指的是網站相容性，而 "interop" 則指兩個或更多瀏覽器的行為相同。

根據這種術語，這項工作涉及的是互操作性，因此選擇了相應的命名。

從 2019 年開始，Google 和其他瀏覽器供應商（ Mozilla Firefox、Microsoft 等）一同協力蒐集報告，來了解我們開發者的痛點，進行解決瀏覽器兼容性的難題。

這些報告促成了 Compat 2021 的誕生，而 Compat 2021 帶來了許多強大功能，奠定了牢固的基礎，在 2021 年底時得到的改良反饋得分都超出了 90%。

於是就又誕生了本文要提到的 Interop 2022 與今年的 Interop 2023。

Compat 2021、Interop 2022 與 Interop 2023 都是為了讓網頁開發體驗可以更好，史上第一次所有主流的瀏覽器供應商與相關利益者聯合起來，一起解決跨瀏覽器兼容性問題，

開發人員需求評估調查與瀏覽器兼容性報告
Web DNA Report | MDN Web Docs 和 MDN Browser Compatibility Report 2020 - MDN

考慮標準
1.特性使用情況。例如，flexbox 在所有頁面瀏覽中使用率達到 75%，並且在 HTTP Archive 中的採用率正在強勁增長。
2.錯誤的數量（在 Chromium、Gecko、WebKit 中），對於 Chromium，這些錯誤有多少星號。
3.調查結果：上方提到的「開發人員..與瀏覽..報告」兩項與 State of CSS 中最為人知且使用最多的特性
4.web-platform-tests 的測試結果。例如，wpt.fyi 上的 flexbox 測試。
5.Can I use 網站上搜尋次數最多的特性。

以下接取自 Web.dev 官方貼文解釋

Compat 2021

在網頁上的相容性一直是開發者面臨的重大挑戰。

在過去的幾年中，Google 和其他合作夥伴，包括 Mozilla 和 Microsoft，已經開始深入了解開發者在網頁開發中遇到的主要痛點，以推動工作和優先順序，改善這種情況。

這個專案與 Google 的開發者滿意度（DevSAT）工作有關，並且始於 2019 年和 2020 年的 MDN DNA（Developer Needs Assessment）調查，以及在 MDN Browser Compatibility Report 2020 中展示的深入研究努力。

額外的研究也在不同的渠道進行，比如 State of CSS 和 State of JS 調查。

2021 年的目標是在五個關鍵焦點領域中消除瀏覽器相容性問題，使開發者可以自信地在其上建立可靠的基礎。這個努力被稱為 #Compat 2021。

在其他事情中，Compat 2021 導致了為強大功能建立了穩固的基礎，比如 CSS grid（12% 的使用率且穩步增長）和 CSS flexbox（77% 的使用率），包括 flexbox 中的 gap 屬性，這解決了開發者在採用新的佈局方法時的主要痛點。

在 2021 年底的時候，所有實現方面都達到了超過 90% 的分數！

Interop 2022

Interop 2022 是一個基準，由三個主要瀏覽器實現的代表所同意，通過公開提名和評審的過程進行開發，並得到了支持者 Apple、Bocoup、Google、Igalia、Microsoft 和 Mozilla 的意見。

這個基準專注於 15 個區域，這些區域是開發者指出的，當這些區域在不同瀏覽器之間缺失或存在相容性問題時，會尤其令人困擾。

所有瀏覽器供應商都同意專注於這些區域，並且所有參與其中的人都熱切期待著開始，讓網頁開發的體驗得到明顯的改善。

Off-topic remark - Edge

取自原文重點：Safari成為全球市占第二的桌機瀏覽器 | iThome

去年 1 月到 3 月底時，Safari 與 Edge 市占率分別為 9.56% 和 9.65%。但從 4 月開始，Safari 漸漸被 Edge 超過，一度超過 1%。

而在今年 Safari 又反超回去 Edge，實在精彩。但第二大的瀏覽器為什麼會下降呢？根據 Filipe Espósito 在 9to5Mac 的報導指出 Safari 在現代 Web 標準的支援方面落後競爭者。

相對地，Edge 在今年推出了許多功能，像是 GPT 為底層的 Bing Chat、圖像設計工具 Designer 等。

再往回重點 Compat 2021 合作的瀏覽器供應商也有 Microsoft（Edge），他們擺脫了買斷 Windows 和 Office 的傳統枷鎖，走向了新潮流的雲端訂閱制與行動裝置。

瀏覽器則打掉了 IE，使用了 Google 的核心 Chromium 推出了 Edge，讓我們再讚嘆一次 IE 的離世。

PC 瀏覽器統計 (僅供參考)

StatsCounter 的PC瀏覽器統計

What do Compat 2021 and Interop 2022 focus on?

Compat 2021 致力於消除瀏覽器相容性問題的五個主要焦點領域，使開發者可以在這些領域上自信地建立可靠的基礎。

而 Interop 2022 的重點是在15個開發者認為在不同瀏覽器之間缺失或存在相容性問題時尤其困擾的領域上制定基準。

下面將整理一下是哪幾個功能層面：

Compat 2021

Flexbox
Grid
position: sticky
aspect-ratio -> CSS aspect-ratio property
Transforms

Interop 2022

Cascade Layers
Color spaces and CSS color functions
New viewport units -> Viewport Units：Small, Large, and Dynamic
Scrolling
Subgrid
CSS Containment (the contain property)
The <dialog> element
Form controls
Typography and Encodings: 包括 font-variant-alternates、font-variant-position、ic 單位和 CJK 文字編碼。
Web Compat, 專注於不同瀏覽器之間的差異，這些差異已導致影響最終用戶的網站相容性問題。