2021 年相容性：消除網路上的五個主要相容性問題點

Google 正與其他瀏覽器廠商和業界合作夥伴攜手，為網站開發人員修正瀏覽器相容性的五大問題：CSS flexbox、CSS 格線、position: sticky、aspect-ratio 和 CSS 轉換。

Philip Jägenstedt
Philip Jägenstedt
X GitHub 首頁
Robert Nyman

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

選擇目標

因為整個網路都發生瀏覽器相容性問題 本專案著重在少數問題上 有待改進之處，因此移除了主要問題 開發人員

相容性專案會根據多項標準來決定要在哪些區域 以及部分優先順序：

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 網誌文章提供更多範例，進一步深入探討這些問題。

排定優先順序的原因

CSS 格線

CSS 格線為 新型網頁版面配置的核心構成要素，取代許多舊版技術 以及解決方法隨著採用率成長，必須持續穩定運作 因為瀏覽器之間差異並非如此。 缺少為格線版面配置加上動畫的功能，Gecko 支援但不支援 Chromium 或 WebKit。如果支援 您可以藉此：

Chen 出品的西洋棋示範 Hui Jing。

排定優先順序的原因

，瞭解如何調查及移除這項存取權。

CSS 位置：固定式

固定位置 可讓內容固定在可視區域邊緣 固定在可視區域頂端的標頭。儘管支援 這是因為瀏覽器常常無法正常運作。 例如： 固定式表格標題 Chromium 並不支援，但現在 旗標支援 在所有瀏覽器中，結果就會不一致：

Chromium 顯示「TablesNG」
壁虎
WebKit

查看固定式表格標題 我是 Rob Flack 的示範影片

排定優先順序的原因

CSS 長寬比屬性

而 aspect-ratio敬上 CSS 屬性可讓您輕鬆維持一致的寬度與高度 即可免除 padding-top 入侵：

使用 padding-top
.container {
  width: 100%;
  padding-top: 56.25%;
}
使用顯示比例
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

由於這種情況很常見，我們會廣泛使用。 我們希望在所有常見的情境和瀏覽器上 都維持良好狀態

排定優先順序的原因

  • 問卷調查：廣為人知，但尚無廣泛使用於美國 CSS
  • 測試：通過 27% 測試 在所有瀏覽器中
  • 使用方式： 3% 和 預計成長

CSS 轉換

CSS 轉換 所有瀏覽器 網頁。但是仍有許多領域互不相同 特別是動畫和 3D 轉換例如資訊卡 折疊效果在各種瀏覽器之間可能存在非常不一致的情況：

Chromium (左側)、Gecko (中間) 和 WebKit (右側) 的卡片翻轉效果。 David Baron，來自錯誤 註解。

排定優先順序的原因

如何做出貢獻及參與

追蹤並分享我們張貼的任何最新消息 @ChromiumDev 或公開郵寄清單， Compat 2021。確認錯誤是否存在。 回報 如有任何問題，請透過上述方式與我們聯絡 頻道。

這裡會定期在 web.dev 發布相關進度，你也可以 也追蹤 Compat 2021 資訊主頁。

Compat 2021 資訊主頁
Compat 2021 資訊主頁 (螢幕截圖擷取時間：2021 年 11 月 16 日)。

我們希望藉這個方式與瀏覽器廠商攜手合作，進一步提升穩定性和 互通性即可協助您在網路上創作出驚人的內容！