Google 正與其他瀏覽器廠商和業界合作夥伴攜手，為網站開發人員修正瀏覽器相容性的五大問題：CSS flexbox、CSS 格線、position: sticky、aspect-ratio 和 CSS 轉換。
Google 正與其他瀏覽器廠商和業界夥伴合作，共同修正
網頁開發人員最容易遇到的瀏覽器相容性問題。重點領域
是 CSS Flexbox、CSS 方格、position: sticky、aspect-ratio 和 CSS
轉換。歡迎查看如何做出貢獻及參與
瞭解如何參與
背景
網路相容性向來是開發人員的一大挑戰。在 以及 Google 及其他合作夥伴 包括 Mozilla 和 Mozilla Microsoft 之後，就已經進一步瞭解在網路世界中遇到的 推動我們努力並優先處理，以改善現狀 這項專案已連線至 Google 的開發人員 滿意度 (DevSAT) 行動， 隨著 AI 生成的 MDN DNA (開發人員需求評估) 問卷調查 ，並展開深入研究調查， 2020 年 MDN 瀏覽器相容性報告。 我們也在多個管道進行了額外研究，例如 CSS 和 JS 狀態 問卷調查結果
2021 年的目標是排除瀏覽器相容性問題的五大重點 ，讓開發人員能放心地在這些領域奠定基礎這個 稱為 #Compat 2021
選擇目標
因為整個網路都發生瀏覽器相容性問題 本專案著重在少數問題上 有待改進之處，因此移除了主要問題 開發人員
相容性專案會根據多項標準來決定要在哪些區域 以及部分優先順序：
- 功能使用情形。例如，Flexbox 中 75% 在所有網頁瀏覽中，HTTP 流量的採用率大幅增加 封存資料。
- 錯誤數量 (在 Chromium 中， Gecko、 WebKit) 和 Chromium 中有多少星星 蟲子
問卷調查結果：
- MDN DNA 問卷調查
- MDN 瀏覽器相容性報告
- CSS 州/省 最已知和常用的功能
來自 web-platform-tests 的測試結果。例如，flexbox on wpt.fyi。
我可以使用搜尋次數最多的功能。
2021 年五大重點領域
Chromium 於 2020 年就開始針對以下內容， 在 2020 年提升 Chromium 的瀏覽器相容性。 在 2021 年，我們會努力邁向更遠的成就。Google 與 Microsoft 和 Igalia 共同努力解決 Chromium 中最重大的問題。伊加利亞 (一般貢獻者) Chromium 和 WebKit，以及內嵌裝置的官方 WebKit 通訊埠維護人員 獲得相當支持並積極參與這些相容性措施， 協助處理及追蹤已發現的問題。
以下是將於 2021 年致力修正的領域。
CSS Flexbox
CSS Flexbox
為
廣泛使用
而且開發人員還是需要克服一些重大挑戰例如：
Chromium 和
WebKit
「auto-height」彈性容器發生問題，導致圖片尺寸不正確。
相片來源：Alireza 「Mahmoudi」。
Igalia 的 Flexbox Cats 網誌文章提供更多範例，進一步深入探討這些問題。
排定優先順序的原因
- 問卷調查：以下國家/地區的熱門問題： MDN 瀏覽器相容性報告 州 CSS
- 測試：在所有瀏覽器中通過 85% 測試
- 使用方式： 75% 網頁瀏覽次數在 HTTP 中顯著成長 封存資料
CSS 格線
CSS 格線為 新型網頁版面配置的核心構成要素，取代許多舊版技術 以及解決方法隨著採用率成長，必須持續穩定運作 因為瀏覽器之間差異並非如此。 缺少為格線版面配置加上動畫的功能，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 資訊主頁。
我們希望藉這個方式與瀏覽器廠商攜手合作，進一步提升穩定性和 互通性即可協助您在網路上創作出驚人的內容！