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
」彈性容器發生問題,導致圖片尺寸不正確。
![延展的棋盤相片。](https://web.developers.google.cn/static/blog/compat2021/image/stretched-photo-a-chessb-bb1e04823881.png?authuser=9&hl=zh-tw)
![西洋棋盤。](https://web.developers.google.cn/static/blog/compat2021/image/chessboard-85fa028fd9056.png?authuser=9&hl=zh-tw)
相片來源:Alireza 「Mahmoudi」。
Igalia 的 Flexbox Cats 網誌文章提供更多範例,進一步深入探討這些問題。
排定優先順序的原因
- 問卷調查:以下國家/地區的熱門問題: MDN 瀏覽器相容性報告 州 CSS
- 測試:在所有瀏覽器中通過 85% 測試
- 使用方式: 75% 網頁瀏覽次數在 HTTP 中顯著成長 封存資料
CSS 格線
CSS 格線為 新型網頁版面配置的核心構成要素,取代許多舊版技術 以及解決方法隨著採用率成長,必須持續穩定運作 因為瀏覽器之間差異並非如此。 缺少為格線版面配置加上動畫的功能,Gecko 支援但不支援 Chromium 或 WebKit。如果支援 您可以藉此:
排定優先順序的原因
- 問卷調查:亞軍 MDN 瀏覽器相容性報告 最廣為人知,但較少在 CSS
- 測試:在所有瀏覽器中通過 75% 測試
- 使用方式: 8% 且持續成長, HTTP 略有成長 封存資料
CSS 位置:固定式
固定位置 可讓內容固定在可視區域邊緣 固定在可視區域頂端的標頭。儘管支援 這是因為瀏覽器常常無法正常運作。 例如: 固定式表格標題 Chromium 並不支援,但現在 旗標支援 在所有瀏覽器中,結果就會不一致:
![](https://web.developers.google.cn/static/blog/compat2021/image/DtNtuWCZUNwi7GGSBPvA.png?authuser=9&hl=zh-tw)
![](https://web.developers.google.cn/static/blog/compat2021/image/hJwLpLeJNfG6kVBUK9Yn.png?authuser=9&hl=zh-tw)
![](https://web.developers.google.cn/static/blog/compat2021/image/od1YyD2BoBqfrnkzynUK.png?authuser=9&hl=zh-tw)
查看固定式表格標題 我是 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 資訊主頁。
![Compat 2021 資訊主頁](https://web.developers.google.cn/static/blog/compat2021/image/compat-2021-dashboard-99a25fe0b80b.png?authuser=9&hl=zh-tw)
我們希望藉這個方式與瀏覽器廠商攜手合作,進一步提升穩定性和 互通性即可協助您在網路上創作出驚人的內容!