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

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

Philip Jägenstedt
Philip Jägenstedt

Google 正與其他瀏覽器廠商和業界夥伴合作,共同修正 網頁開發人員最容易遇到的瀏覽器相容性問題。重點領域 是 CSS Flexbox、CSS 方格、position: stickyaspect-ratio 和 CSS 轉換。歡迎查看如何做出貢獻及參與 瞭解如何參與

背景

網路相容性向來是開發人員的一大挑戰。在 以及 Google 及其他合作夥伴 包括 Mozilla 和 Mozilla Microsoft 之後,就已經進一步瞭解在網路世界中遇到的 推動我們努力並優先處理,以改善現狀 這項專案已連線至 Google 的開發人員 滿意度 (DevSAT) 行動, 隨著 AI 生成的 MDN DNA (開發人員需求評估) 問卷調查 ,並展開深入研究調查, 2020 年 MDN 瀏覽器相容性報告。 我們也在多個管道進行了額外研究,例如 CSSJS 狀態 問卷調查結果

2021 年的目標是排除瀏覽器相容性問題的五大重點 ,讓開發人員能放心地在這些領域奠定基礎這個 稱為 #Compat 2021

選擇目標

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

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

2021 年五大重點領域

Chromium 於 2020 年就開始針對以下內容, 在 2020 年提升 Chromium 的瀏覽器相容性。 在 2021 年,我們會努力邁向更遠的成就。Google 與 Microsoft 和 Igalia 共同努力解決 Chromium 中最重大的問題。伊加利亞 (一般貢獻者) Chromium 和 WebKit,以及內嵌裝置的官方 WebKit 通訊埠維護人員 獲得相當支持並積極參與這些相容性措施, 協助處理及追蹤已發現的問題。

以下是將於 2021 年致力修正的領域。

CSS Flexbox

CSS Flexbox廣泛使用 而且開發人員還是需要克服一些重大挑戰例如: ChromiumWebKitauto-height」彈性容器發生問題,導致圖片尺寸不正確。

延展的棋盤相片。
發生錯誤,因此圖片大小不正確。
,瞭解如何調查及移除這項存取權。
西洋棋盤。
圖片大小正確。
相片來源:Alireza 「Mahmoudi」。

Igalia 的 Flexbox Cats 網誌文章提供更多範例,進一步深入探討這些問題。

排定優先順序的原因

CSS 格線

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

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 日)。

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