Compat 2021 計畫年底更新在今年年底,目標是在以下五個重點領域解決瀏覽器相容性問題:CSS Flexbox、CSS 網格、位置:固定式、長寬比和 CSS 轉換。
今年年底即將到來,該在 Compat 2021 推出最終更新,目標是在五個重點領域解決瀏覽器相容性問題。
超過 90%
所有瀏覽器的分數
自上次更新以來,所有瀏覽器都不斷進步。今年年初,所有瀏覽器的測試分數都比較低,但現在所有瀏覽器的時間都突破了 90%!也就是說,網路平台大幅提高這五個重點領域的互通性。
對瀏覽器引擎的貢獻不僅限於瀏覽器廠商,還有網路社群中的其他內容。對於這項專案,我們特別想感謝 Igalia 的參與,並繼續努力提高分數。Igalia 大力改善了 2021 年 Compat 的五個重點領域。
在 wpt.fyi ,測試結果資訊主頁現在提供篩選後的測試結果檢視畫面,會顯示 Compat 2021 涵蓋的所有測試,以及 Chrome、Firefox 和 Safari 的檢視畫面,方便您比較結果與 7 月上一次的更新。
讓我們來看看各方面的改善措施!
CSS Flexbox
flex-basis: content
目前已可在所有瀏覽器上使用,並已導入至 Chromium 和 WebKit。(Gecko 已支援 content
值)。
在 Chromium 中,系統會修正 Flexbox 大小問題,以配合規格和 Gecko 的行為。此外,Gecko 已修正幾個影響 Compat 2021 的問題,包括彈性項目高度百分比的問題。最後,在 WebKit 中,新增對更多對齊屬性值 (left、right、self-start、start、end) 的支援,並且針對絕對定位進行了多項改善,同時改善 Compat 2021 中的 flexbox 測試結果。
CSS 方格
CSS Grid 在網路上的使用率持續增加,在 2021 年 Web Almanac 和 Chrome 用量指標的案例中都可見。
在 Chrome 和 Edge 93 中推出 GridNG,就解決了 Grid 的許多長期問題,還能讓 Chromium 錯誤追蹤工具消除了令人印象深刻的 38 問題。再加上許多更小的改善措施,Chromium 的 Compat 2021 分數成功提高 3% 到 97%。這項工作是由 Microsoft 的 Edge 團隊負責引導。
先前在 Gecko 中已修正影響 Grid 的絕對定位錯誤,並已在 WebKit 中進行許多修正,結果 Firefox 和 Safari 的體驗提高了 1%,且在網格測試中 Safari 也提高了 3%。
CSS position: sticky
在上一次的更新中,我們發現 position: sticky
是任何瀏覽器 (在此案例中為 Chrome 和 Edge) 達到 100% 通過測試的第一個區域。現在,按照 WebKit 實作的多種修正方法後,Safari 的這些測試也獲得了 100% 的分數。Safari 15 中
已包含這些改善項目
CSS aspect-ratio
屬性
繼續支援跨瀏覽器定義元素的顯示比例 (寬度與高度比例),2021 年的 Compat 2021 分數分別達到 99%、97% 和 95% (Chrome/Edge、Firefox 和 Safari) 的分數分別達到 99%、97% 及 95%。大部分的改善項目並非aspect-ratio
屬性本身,而是 width
和 height
屬性如何對應至預設的元素aspect-ratio
值。這適用於 WebKit 中的多個元素,以及適用於 Chromium 的 <canvas>
。
CSS 轉換
Chromium、Gecko 和 WebKit 現已支援 transform: perspective(none)
。這樣可以更輕鬆地在視角和無視角之間建立動畫。
在 Chromium 中,transform-style: preserve-3d
(允許子項元素參與同一 3D 場景) 和 perspective
屬性 (對子元素套用透視轉換) 現在能夠與規格保持一致,使其只套用到子項元素。
所有瀏覽器的 CSS 轉換分數之所以大幅增加,主要是因為測試套件已進行改善,也就是修正或移除錯誤的測試。如此一來,您就能更輕鬆地瞭解其餘的互通性問題,並避免日後發生迴歸問題。
結語
年底前大家所做的努力,除了改善分數,測試基礎架構也更加完善,我們由衷感謝。aspect-ratio
是網頁程式開發人員長久以來一直以來要求的功能,現在所有瀏覽器都支援這項功能。隨著 Flexbox、格線和 position: sticky
的使用持續增加,而由於 2021 年進行許多改善,現在這些功能已在各種瀏覽器中提供更好的支援。
接下來該怎麼做?我們很高興能在下一次這項改良版本中,繼續與其他瀏覽器廠商和更廣大的社群合作。我們已開始研究及討論 2022 年的重點領域敬請期待我們近期的公告。
如有任何意見或問題,歡迎透過 Twitter 與我們聯絡 (@ChromiumDev)。