為解決網路開發人員的五大瀏覽器相容性問題,Google 正與其他瀏覽器供應商和業界合作夥伴合作:CSS flexbox、CSS Grid、position: sticky
、aspect-ratio
和 CSS 轉換。
Google 正與其他瀏覽器供應商和業界合作夥伴合作,為網頁程式開發人員修正瀏覽器相容性的前五點問題。重點領域包括 CSS Flexbox、CSS Grid、position: sticky
、aspect-ratio
和 CSS 轉換。請參閱如何貢獻一己之力一文,瞭解如何參與。
背景
對開發人員來說,網路相容性一直是一大挑戰。過去幾年來,Google 和其他合作夥伴 (包括 Mozilla 和 Microsoft) 已深入研究網頁開發人員面臨的最大問題點,藉此推動相關工作並優先處理,改善情況。這項專案與 Google 的開發人員滿意度 (DevSAT) 相關工作有關,在 2019 和 2020 年建立 MDN DNA (開發人員需求評估) 問卷調查,並經過 MDN 瀏覽器相容性報告 2020 深入研究,我們開始大規模進行研究。我們透過各種管道進行其他研究,例如 CSS 現況和JavaScript 現況問卷調查。
2021 年的目標是在五個主要領域解決瀏覽器相容性問題,讓開發人員放心建構這些領域,做為可靠的基礎。這種做法稱為 #Compat 2021。
選擇目標
雖然所有網路平台基本上都存在瀏覽器相容性問題,但本專案的重點僅在於少數能夠大幅改善的問題部分,因此排除這些問題對開發人員來說是最嚴重的問題。
相容性專案會根據多項條件來決定要優先處理的區域,其中幾個條件如下:
- 功能使用情形。舉例來說,Flexbox 在所有的網頁瀏覽中都使用了 75%,而 HTTP 封存中的採用率也越來越高。
- 錯誤數量 (在 Chromium、Gecko、WebKit 中) 和 Chromium 中的錯誤數量。
問卷調查結果:
- MDN DNA 問卷調查
- MDN 瀏覽器相容性報告
- 最熟悉和使用的 CSS 狀態
web-platform-tests 的測試結果。例如 flexbox on wpt.fyi。
我可以使用最常搜尋的地圖項目。
2021 年的五大重點領域
2020 年,Chromium 開始著手解決「在 2020 年改善 Chromium 的瀏覽器相容性」一文中列出的重點領域。 2021 年,Google 將全力以赴,進一步向前邁進。Google 和 Microsoft 正攜手解決 Chromium 中的重大問題,以及 Igalia。Igalia 是 Chromium 和 WebKit 的一般貢獻者,以及內嵌裝置官方 WebKit 通訊埠的維護人員,致力於維持這些相容性方面的支援,並可協助處理及追蹤發現的問題。
以下是 2021 年我們承諾進行修正的領域:
CSS Flexbox
網路上已廣泛使用 CSS Flbox,開發人員仍面臨一些重大的挑戰。舉例來說,Chromium 和 WebKit 都發生 auto-height
Flex 容器導致圖片尺寸錯誤的問題。
Igalia 的 flexbox Cats 網誌文章深入探討這些問題,並提供更多範例。
優先順序
- 問卷調查:MDN 瀏覽器相容性報告中的主要問題,這是 CSS 現狀中最廣為使用的問題。
- 測試:在所有瀏覽器中通過 85%
- 用量:75% 的網頁瀏覽次數,在 HTTP 封存中大幅增加
CSS 方格
CSS Grid 是現代網頁版面配置的核心建構區塊,可取代許多較舊的技術和解決方法。隨著採用率持續成長,您需要更穩定可靠,這樣瀏覽器之間的差異就成為避免這種情況的主因。其中一個問題是,可以使用 Gecko 的格線版面配置動畫功能,但不支援 Chromium 或 WebKit。系統會支援以下效果,以執行以下效果:
優先順序
- 問卷調查:MDN 瀏覽器相容性報告中的亞軍,雖然在 CSS 狀態中廣為人知,但較不常使用
- 測試:在所有瀏覽器中有 75% 通過
- 用量:8% 且穩定成長,HTTP 封存略有成長
CSS 位置:固定式
固定式位置設定可讓內容固定在可視區域邊緣,通常用於一律在可視區域頂端顯示的標題。雖然所有瀏覽器都支援這項功能,但仍有一些常見用途無法正常運作。舉例來說,Chromium 不支援固定式表格標頭,但現在支援在旗標後方支援,但不同瀏覽器產生的結果不一致:
詳情請參閱 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 資訊主頁,查看各重點領域的進度。
希望瀏覽器廠商能藉由共同努力,提升穩定性和互通性,進而打造出令人驚豔的網路成果!