Compat 2021 年中推出更新,目的是排除以下五個重點領域的瀏覽器相容性問題:CSS flexbox、CSS Grid、位置:固定式、長寬比和 CSS 轉換。
Compat 2021 推出中年中更新,希望消弭五個重點領域中的瀏覽器相容性問題。如要進一步瞭解 #compat2021 的運作方式,以及我們如何決定重點領域,請參閱 3 月的公告。
本文所討論的 Chromium 改善項目將適用於 Chrome、Edge 和所有以 Chromium 為基礎的瀏覽器。
我們如何衡量進度
您可以在 Compat 2021 資訊主頁上查看 web-platform-tests,瞭解通過的測試數量和不同瀏覽器的趨勢圖表。
簡單的「通過測試」數據並不能完整說明瀏覽器相容性的情況,但這是我們用來瞭解我們進步的信號之一。測試結果中的瀏覽器差異越少,網頁功能在不同瀏覽器中就能彼此互通。
CSS Flexbox
這三個瀏覽器引擎都發現 Flexbox 效能有所提升。
Safari 14.1 提供了 flexbox 的 gap
屬性。您可以利用 gap
屬性輕鬆設定項目之間的間距。這個屬性經常用於格狀版面配置,而 Flexbox 版面配置的支援是 MDN 瀏覽器相容性報告中最要求的功能之一。本次更新後,所有主要瀏覽器都能使用彈性版面配置中的 gap
屬性,而且主要的相容性問題已解決。Safari 14.1 也包含許多 Flexbox 中的圖片修正項目,讓您不再需要採用舊的解決方法。
Firefox 解析了表格以 Flex 項目的轉譯作業,讓 Firefox 通過測試更接近 100% 的通過測試 (目前為 98.5%)。
Chromium 也修正了表格形式的彈性項目。
Chromium 88 中也改以彈性項目的形式重寫圖片,藉此解決許多長期以來的錯誤。最後,Chromium 最近新增了支援新的對齊關鍵字:start
、end
、self-start
、self-end
、left
和 right
。您可以在 Chrome Canary 和 Edge Canary 中測試這些關鍵字。
CSS 方格
CSS 網格的使用率正在穩定成長,目前有超過 9% 的網頁瀏覽量。這三個主要瀏覽器引擎都會實作 CSS Grid,並已完成 89% 以上的相關 Web-platform-測試。如要推動這項功能穩定成長,就必須消除相容性差距。
截至 2021 年為止,Safari 的通過測試已從 89% 提升至 93%,而 Chromium 也正在開發新的架構,以解決更多 CSS 格線問題 (稱為 GridNG)。這是由 Microsoft 團隊所推動,最近讓目標格線測試中的表現從 94% 提升到 97%。您很快就會在 Edge 網誌收到 GridNG 的更新資訊。
CSS position: sticky
我們在 Chromium 推出 TablesNG 後,修正了資料表標頭的 position: sticky
問題,這是為了重新建構資料表的轉譯工作,需要花費多年的時間。這項變更加上一些最終
修正,促使 Chrome 和 Edge 93 開發人員管道全面通過目標測試。
在 position: sticky
以外,TablesNG 已解決 72 個 Chromium 錯誤!
CSS aspect-ratio
屬性
aspect-ratio
屬性對於設定回應式網頁設計來說至關重要,而屬性可讓你直接設定寬度與高度的比例。這也是防止累計版面配置位移的解決方案。
Chrome、Edge 和 Firefox 穩定版和 Safari 15 Beta 版目前支援 aspect-ratio
屬性。隨著跨瀏覽器支援功能的改善,用量也會增加。
雖然沒有任何瀏覽器是否通過 100% 的測試,但 aspect-ratio
的相容性差距是 2021 年 Compat 五個重點領域的最小部分。針對所有主要瀏覽器,有超過 90% 通過測試。日後,我們會持續使用這個測試套件監控進度,使其成為完善的功能。
歡迎前往 web.dev,進一步瞭解 aspect-ratio
屬性的用法和優點。
CSS 轉換
CSS 轉換的指定目標測試結果穩定且穩定改善,因為上述兩個錯誤都已經修正,而且我們已修正各項錯誤。
Chromium 團隊也致力於改善 transform-style:
preserve-3d
和 transform :perspective()
的互通性。期待下一次更新,與您分享更多進展。
整體分數改善情形
自 3 月宣布推出以來,這三種瀏覽器引擎的 2021 年分數均有所提升:
- Chrome 和 Edge 開發人員的版本從 86 上升至 92。
- Firefox 從 83 上升至 86。
- Safari 從 64 上升至 82。
值得一提的是,由於 WebKit 貢獻者投入了大量心力,Safari 因此能將相容性差距提高 18 分。特別是 Igalia 的團隊改進了 aspect-ratio
屬性,以及對 Flexbox 和 Grid 的許多改善項目,例如 Flexbox 的 gap
以及各種錯誤修正。
關注 Compat 2021 進展
如要追蹤 Compat 2021 的進度,請留意資訊主頁、訂閱郵寄清單,或是與我們聯絡 (@chromiumdev)。如果遇到任何問題,請務必為受影響的瀏覽器回報錯誤。