為解決網路開發人員的五大瀏覽器相容性問題，Google 正與其他瀏覽器供應商和業界合作夥伴合作：CSS flexbox、CSS Grid、position: sticky、aspect-ratio 和 CSS 轉換。
Google 正與其他瀏覽器供應商和業界合作夥伴合作，為網頁程式開發人員修正瀏覽器相容性的前五點問題。重點領域包括 CSS Flexbox、CSS Grid、position: sticky、aspect-ratio 和 CSS 轉換。請參閱如何貢獻一己之力一文，瞭解如何參與。
背景
對開發人員來說，網路相容性一直是一大挑戰。過去幾年來，Google 和其他合作夥伴 (包括 Mozilla 和 Microsoft) 已深入研究網頁開發人員面臨的最大問題點，藉此推動相關工作並優先處理，改善情況。這項專案與 Google 的開發人員滿意度 (DevSAT) 相關工作有關，在 2019 和 2020 年建立 MDN DNA (開發人員需求評估) 問卷調查，並經過 MDN 瀏覽器相容性報告 2020 深入研究，我們開始大規模進行研究。我們透過各種管道進行其他研究，例如 CSS 現況和JavaScript 現況問卷調查。
2021 年的目標是在五個主要領域解決瀏覽器相容性問題，讓開發人員放心建構這些領域，做為可靠的基礎。這種做法稱為 #Compat 2021。
選擇目標
雖然所有網路平台基本上都存在瀏覽器相容性問題，但本專案的重點僅在於少數能夠大幅改善的問題部分，因此排除這些問題對開發人員來說是最嚴重的問題。
相容性專案會根據多項條件來決定要優先處理的區域，其中幾個條件如下：
- 功能使用情形。舉例來說，Flexbox 在所有的網頁瀏覽中都使用了 75%，而 HTTP 封存中的採用率也越來越高。
- 錯誤數量 (在 Chromium、Gecko、WebKit 中) 和 Chromium 中的錯誤數量。
問卷調查結果：
- MDN DNA 問卷調查
- MDN 瀏覽器相容性報告
- 最熟悉和使用的 CSS 狀態
web-platform-tests 的測試結果。例如 flexbox on wpt.fyi。
我可以使用最常搜尋的地圖項目。
2021 年的五大重點領域
2020 年，Chromium 開始著手解決「在 2020 年改善 Chromium 的瀏覽器相容性」一文中列出的重點領域。 2021 年，Google 將全力以赴，進一步向前邁進。Google 和 Microsoft 正攜手解決 Chromium 中的重大問題，以及 Igalia。Igalia 是 Chromium 和 WebKit 的一般貢獻者，以及內嵌裝置官方 WebKit 通訊埠的維護人員，致力於維持這些相容性方面的支援，並可協助處理及追蹤發現的問題。
以下是 2021 年我們承諾進行修正的領域：
CSS Flexbox
網路上已廣泛使用 CSS Flbox，開發人員仍面臨一些重大的挑戰。舉例來說，Chromium 和 WebKit 都發生 auto-height Flex 容器導致圖片尺寸錯誤的問題。
相片提供者：Alireza Mahmoudi。
Igalia 的 flexbox Cats 網誌文章深入探討這些問題，並提供更多範例。
優先順序
- 問卷調查：MDN 瀏覽器相容性報告中的主要問題，這是 CSS 現狀中最廣為使用的問題。
- 測試：在所有瀏覽器中通過 85%
- 用量：75% 的網頁瀏覽次數，在 HTTP 封存中大幅增加
CSS 方格
CSS Grid 是現代網頁版面配置的核心建構區塊，可取代許多較舊的技術和解決方法。隨著採用率持續成長，您需要更穩定可靠，這樣瀏覽器之間的差異就成為避免這種情況的主因。其中一個問題是，可以使用 Gecko 的格線版面配置動畫功能，但不支援 Chromium 或 WebKit。系統會支援以下效果，以執行以下效果：
優先順序
- 問卷調查：MDN 瀏覽器相容性報告中的亞軍，雖然在 CSS 狀態中廣為人知，但較不常使用
- 測試：在所有瀏覽器中有 75% 通過
- 用量：8% 且穩定成長，HTTP 封存略有成長
CSS 位置：固定式
固定式位置設定可讓內容固定在可視區域邊緣，通常用於一律在可視區域頂端顯示的標題。雖然所有瀏覽器都支援這項功能，但仍有一些常見用途無法正常運作。舉例來說，Chromium 不支援固定式表格標頭，但現在支援在旗標後方支援，但不同瀏覽器產生的結果不一致：
詳情請參閱 Rob Flack 的固定式資料表標頭示範。
優先順序
- 問卷調查：CSS 現狀中廣為人知/常用，並在 MDN 瀏覽器相容性報告中多次出現
- 測試：所有瀏覽器中有 66% 的流量
- 用量：8%
CSS 顯示比例屬性
新的 aspect-ratio CSS 屬性可協助您輕鬆讓元素維持一致的寬度與高度，不必使用已知的 padding-top 駭客：
.container {
width: 100%;
padding-top: 56.25%;
}
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
由於這是常有廣泛使用的情況，我們希望確保在所有常見情境和瀏覽器中都確實遵守這個做法。
優先順序
CSS 轉換
多年來，所有瀏覽器都支援 CSS 轉換，在網路上廣泛使用。然而，仍有許多地方無法在瀏覽器上正常運作，特別是動畫和 3D 轉換。舉例來說，資訊卡翻轉效果在不同瀏覽器上可能會非常不一致：
優先順序
如何貢獻內容及參與追蹤
歡迎在 @ChromiumDev 或公開郵寄清單 (Compat 2021) 上發布，並分享最新消息。請確保錯誤存在，或是在您遇到的問題時回報。如有任何遺漏，請透過上述管道與我們聯絡。
我們會定期透過 web.dev 更新相關進度。您也可以前往 Compat 2021 資訊主頁，查看各重點領域的進度。
希望瀏覽器廠商能藉由共同努力，提升穩定性和互通性，進而打造出令人驚豔的網路成果！