Interop 2022 Google Apple Microsoft Mozilla 瀏覽器 相容性
CSS 前端工程 網路科技

從 Compat 2021 到 Interop 2022,史上第一次所有主流的瀏覽器廠商,合作解決瀏覽器相容性的問題

https://web.dev/interop-2022/
前幾天看到這篇文章,史上第一次所有主流的瀏覽器廠商 (包含 Google Chrome, Apple Safari, Microsoft Edge, Mozilla Firefox) 聯合起來,一起解決瀏覽器相容性的問題。因此這幾家瀏覽器廠商一起成立了一個 Interop 2022 專案。

上方 web dev 文章提到了 compatibility, interoperability 這兩個字的不同。compatibility 指的是 “site compat”,應該是以網站為主,同一網站在不同的環境應該要有類似的行為。interoperability 應該是以環境為主,在這裡指的是瀏覽器,不同的瀏覽器對一樣的語法、指令,應該要有高度類似的行為。因為 compatibility, interoperability 這兩個字嚴格來講語意不太相同,這幾家瀏覽器廠商是選用 interoperability 的 Interop。

https://web.dev/compat2021/
事實上從 2019,Google, Mozilla, Microsoft 就已經合作開始在研究瀏覽器相容的議題,並在 2021 成立了 Compat 2021 專案。Compat 2021 專案專注於以下五個領域:

  1. CSS Flexbox
  2. CSS Grid
  3. position: sticky
  4. aspect-ratio
  5. CSS Transforms:有 3D transform 和動畫時,每個瀏覽器行為有可能不同。

Compat 2021 對新 CSS 語法的普及,不同瀏覽器相容性的提升,都有一些明顯的成果。

這邊聊一下微軟 (Microsoft),注意 Compat 2021 的成員已經有微軟了,他們已經跟 Google, Mozilla 合作很久了。現任的微軟領導班子真的很厲害,解開了傳統賣套裝軟體 (Windows, Office) 的束縛,走向雲端訂閱制,走向行動裝置,微軟的軟體也同時在 Android, iPhone, Mac 上架。瀏覽器打掉 IE,用 Chromium 當核心重做 Edge。用 Chromium 當核心就代表要跟 Google 合作,微軟想得也很清楚,就是跟 Google 合作。

撰文的現在是2022年4月,瀏覽器市佔率 Edge 已經接近第二名的 Safari,很多3C網站都預測 Edge 市佔率將會超越 Safari。微軟現任的領導班子很厲害,公司策略都想得很清楚,也是商業競合策略的最佳教材。公司業務的某個部分跟外部合作,可能因此會有很多機會、很多成長,那為什麼不合作。

不管是微軟,還是其他巨頭企業,當然都知道競合策略,當然也知道賽局理論,這次 Interop 2022 的合作就是最好的例子。延伸閱讀:[讀書筆記] 思辨賽局 (The Art of Strategy)

回到 Interop 2022,它主要專注在以下 15 個領域:

  1. Cascade Layers
    關於這個主題我有一篇文章:CSS Cascade Layers,解決長期以來 CSS 競爭權重 (Specificity) 的問題
  2. Color Spaces and Functions
  3. Containment
  4. Dialog Element
  5. Forms
  6. Scrolling
  7. Subgrid
  8. Typography and Encodings
  9. Viewport Units:CSS Values and Units Module Level 4 新定義了 3 個單位,lvh, svh, dvh
  10. Web Compat:以使用者的角度來講,同一網站不同瀏覽器,有沒有真的會影響到使用體驗的部分。
    === 以下是從 Compat 2021 繼承下來 ===
  11. CSS Flexbox
  12. CSS Grid
  13. position: sticky
  14. aspect-ratio
  15. CSS Transforms

Chrome, Safari, Edge, Firefox 在 Interop 2022 規格所得的分數,會持續在這個網頁更新 https://wpt.fyi/interop-2022

結論

撰文的現在是2022年4月,CSS 從 responsive design, Flexbox, CSS Grid 等新技術到現在,已經十幾年的時間。以整個軟體工程來講,CSS 是年輕的語言沒錯,但十幾年下來,要找到新的突破點、優化點確實也不容易。

但畢竟任何網路應用,離不開網頁的呈現。幾個大的網路巨頭企業,也各自有自己的瀏覽器。但值得高興的是,這幾家巨頭企業在瀏覽器的部分是傾向於合作,而不是對抗。巨頭的合作對 CSS 這個語言,網路科技的發展,乃至於整個網路環境,都是一個比較好的發展道路。