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 和 Microsoft) 已著手進一步瞭解網頁開發人員的主要痛點,以便推動我們的工作並訂定優先順序,改善現況。這個專案與 Google 的開發人員滿意度 (DevSAT) 工作相關,並在 2019 年和 2020 年建立 MDN DNA (開發人員需求評估) 問卷調查,以及在 MDN 瀏覽器相容性報告 2020 中呈現深入研究成果後,開始擴大規模。我們也透過其他管道進行了額外調查,例如 CSS 現況JavaScript 現況問卷調查。

2021 年的目標是消除五個重點領域的瀏覽器相容性問題,讓開發人員可放心以這些領域做為可靠的基礎。這項計畫名為 #Compat 2021

選擇要著重的項目

雖然所有網站平台都存在瀏覽器相容性問題,但這個專案的重點是針對少數最有問題的領域,這些領域可以大幅改善,因此我們將其列為開發人員的首要問題。

相容性專案會使用多項條件影響要優先處理的區域,其中部分條件如下:

2021 年五大重點領域

在 2020 年,Chromium 開始著手處理「在 2020 年改善 Chromium 瀏覽器的相容性」一文中列出的重點項目。2021 年,我們將開始致力於更進一步的努力。Google 和 Microsoft 正在與 Igalia 合作,解決 Chromium 中的重要問題。Igalia 是 Chromium 和 WebKit 的定期貢獻者,也是嵌入式裝置官方 WebKit 移植版本的維護者,他們一直都非常支持並參與這些相容性工作,並將協助解決和追蹤已知的問題。

以下是我們承諾在 2021 年修正的項目。

CSS flexbox

CSS flexbox 在網路上廣泛使用,但開發人員仍面臨一些重大挑戰。舉例來說,ChromiumWebKit 都曾發生 auto-height Flex 容器的問題,導致圖片尺寸不正確。

經過拉伸的棋盤相片。
因錯誤導致圖片大小不正確。
棋盤。
正確的圖片大小。
相片來源:Alireza Mahmoudi

Igalia 的 flexbox Cats 網誌文章深入探討這些問題,並提供更多範例。

優先順序的原因

CSS 格線

CSS 格線是現代網頁版面配置的核心構件,可取代許多舊版技術和因應措施。隨著採用率增加,這項功能必須更加穩固,這樣使用者就不會因為瀏覽器之間的差異而避免使用。缺少的功能之一是能否為格線版面配置製作動畫,Gecko 支援這項功能,但 ChromiumWebKit 不支援。在支援的情況下,您可以實現以下效果:

動畫西洋棋示範,由陳慧晶製作。

優先處理的原因

CSS 位置:固定

固定位置可讓內容固定在可視區域的邊緣,通常用於一律顯示在可視區域頂端的標頭。雖然所有瀏覽器都支援這項功能,但在某些常見用途中,這項功能無法正常運作。舉例來說,Chromium 不支援固定表格標題,雖然現在已在標記後支援,但不同瀏覽器的結果並不一致:

使用「TablesNG」的 Chromium
Gecko
WebKit

請參閱 Rob Flack 製作的固定表格標題示範

優先處理的原因

CSS aspect-ratio 屬性

新的 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 上發布進度更新,您也可以在 2021 年相容性資訊主頁中追蹤每個重點領域的進度。

2021 年相容性資訊主頁
相容性 2021 資訊主頁 (2021 年 11 月 16 日的螢幕截圖)。

我們希望這項由瀏覽器供應商共同努力的改善可靠性和互通性的計畫,能協助您在網路上打造出色的內容!