消除差距

讓您更輕鬆地建構網頁應用程式。

無論是與開發人員個別交談,還是透過CSS 現況等問卷調查,我們都會聽到相同的意見。開發人員很難製作在各瀏覽器中運作良好的網站和應用程式,也難以判斷何時可以安全使用令人興奮的新功能。

Flexbox 間距

舉例來說,gap 屬性是一種有問題的屬性,可讓您在 gridflex 項目之間,或是 multicol 容器中的欄之間留出間距。雖然我們很早就為多欄配置使用 column-gap,但這個屬性最早是在格狀版面配置中以 grid-gap 的形式出現,並與 grid-column-gapgrid-row-gap 一同出現。

在瀏覽器支援格線版面配置後,此屬性與 row-gapcolumn-gap 一併重新命名為 gap。接著,我們也指定該元素可在彈性版面配置中運作。重新命名後,就不會有多個資源執行相同的操作。

.box {
  display: flex;
  gap: 1em;
}

Firefox 在 2018 年 10 月推出了彈性版面配置的屬性。直到 2020 年 7 月,這項功能才在 Chrome 中推出,接著在 2021 年 4 月於 Safari 中推出。這表示我們必須等待兩年六個月,才能安全使用 gap。實際上,由於需要支援舊版瀏覽器,因此大多數開發人員的等待時間會更長。我們無法使用功能查詢偵測彈性版面配置中的間距支援情形,因此在彈性版面配置中支援 gap 會帶來更多問題。由於 gap 屬性在格狀結構中受支援,@supports (gap:1em) 會傳回 true。

另一個問題是,當新功能在某個瀏覽器推出時,使用者就會開始討論並分享示範。這項工作通常會在任何穩定版瀏覽器推出前就開始進行。這可能會讓開發人員感到困惑,或至少感到挫折。您會不斷聽到新功能的相關討論,但實際上卻無法使用,因為缺乏支援。

為什麼支援服務會有空檔?

這篇文章並非針對某個瀏覽器速度緩慢的批評。比較不同平台的功能,您會發現不同瀏覽器在不同功能上各有優勢。

大部分功能都會在一個瀏覽器中製作原型。舉例來說,Microsoft 最先建立了格線版面配置規格,並在 Internet Explorer 10 的初始表單中實作。Mozilla 的工程師為瞭解子格線的運作方式,做了許多研究,因此這項功能首先在 Firefox 推出。我們發現 Safari 在推出令人興奮的新色彩功能方面居於領先地位。

雖然某個瀏覽器可能會負責製作原型,但 CSS 工作群組中的所有瀏覽器 (和其他機構) 代表都會討論 CSS 功能。這項功能必須能夠在所有瀏覽器中實作,且設計方式不應導致無法在某個瀏覽器中實作。這會導致支援服務永久缺口,且無法採用這項功能。

不過,在實作功能時,您必須將該功能與該瀏覽器的所有其他可能功能一併列為優先。有時,我們需要進行其他工作來改善瀏覽器,因此無法立即處理。其中一個很好的例子就是 Chromium 中的 RenderingNG 工作。這為子格線的實作鋪路;不過,Firefox 和 Chromium 之間的子格線差距太大,因為我們必須先在新的轉譯引擎中重新實作格線版面配置。

問題

這裡有兩個問題。第一個問題是互通性問題,也就是從某個瀏覽器推出某項功能,到所有瀏覽器都支援該功能,可能需要很長的時間。

第二個問題是訊息傳送問題。如何讓我們清楚瞭解支援服務的缺口?我們如何分享新功能,讓使用者不必仔細研究每項功能,就能瞭解各項功能的支援程度?

互通性

瀏覽器已開始合作解決互通性問題。去年的 Compat 2021 協助解決許多功能的支援差距,包括 Flex 版面配置中的 gap 屬性。今年的 Interop 2022 計畫將著重於 15 項功能,其中部分功能已開始有所進展。

您可以前往Interop 2022 資訊主頁追蹤進度。

訊息

第二個問題是,當我們在 web.dev 和 developer.chrome.com 討論功能時,我很樂意提供協助。我希望在您閱讀內容時,能清楚瞭解功能的狀態,並提供實用的解決方案。

我們推出了許多基礎課程,後續還會有更多課程。這些課程可協助您瞭解如何使用核心網路平台技術,建構新式網站。退房日期:

我們正努力將本網站的內容聚焦於您可以安全使用的項目。我們尚未完全實現這項目標,但在未來幾個月,你應該會開始看到我們朝著實用性方向前進。

我們也透過支援 Open Web Docs 專案,為開放式網頁說明文件做出貢獻。這麼做可確保我們在 MDN 上提供一流的說明文件,以及最新的瀏覽器相容性資料。接著,我們會在 web.dev 使用這些資料,顯示功能支援情形。以下是 Flex 版面配置目前支援 gap 的情況。

瀏覽器支援

  • Chrome:84。
  • Edge:84。
  • Firefox:63。
  • Safari:14.1。

如要進一步瞭解 Chrome 的網路願景,以及我們在來源和開發人員試用版中進行的實驗,請前往我們的姊妹網站 developer.chrome.com 查看相關內容。這些內容可能仍處於實驗階段,或目前僅支援 Chrome,但我們仍希望您能探索這些內容並提供意見回饋。

目前是網頁的黃金時期,我們希望能更快為您提供重要功能,並清楚說明現有的差距,讓網頁開發作業變得更有趣,減少挫折感。

相片來源:Cristofer Maximilian