消除差距

更輕鬆地建構網路應用程式。

Rachel Andrew

與開發人員交談時 (無論是個別交談或透過 CSS 狀態等問卷調查)，我們一再聽到相同的心聲。開發人員很難製作可在各種瀏覽器上順暢運作的網站和應用程式，也很難判斷何時可安全使用令人期待的新功能。

Flexbox 間距

以有問題的屬性為例，gap 屬性可讓您在 格線或 彈性項目之間，或 multicol 容器中的欄之間建立間距。雖然我們在多欄版面配置中已使用 column-gap 很久，但這個屬性首次出現在格線版面配置中時，是 grid-gap，與 grid-column-gap 和 grid-row-gap 一併出現。

網格版面配置在瀏覽器中推出後不久，這個屬性就重新命名為 gap，以及 row-gap 和 column-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 計畫有助於縮小多項功能 (包括彈性版面配置中的 gap 屬性) 的支援差距。今年的 Interop 2022 計畫著重於 15 項功能，其中部分功能已有所進展。

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

訊息

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

我們已推出多門基礎課程，未來還會推出更多課程。這些課程將說明如何使用核心網路平台技術，為新式網路建構內容。退房日期：

我們正努力調整本網站的內容，確保您能安心使用。我們尚未完全達成目標，但您應該會在接下來幾個月內，看到實用性逐漸提升。

我們也支援 Open Web Docs 計畫，為開放式網路文件貢獻心力。這可確保我們在 MDN 上提供一流的說明文件，以及最新的瀏覽器相容性資料。然後，我們會在 web.dev 上使用這項資料，顯示功能支援情形。以下是彈性版面配置目前支援的 gap。

Browser Support

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

如要進一步瞭解 Chrome 對網路的願景，以及我們在來源和開發人員試用中實驗的項目，您會發現越來越多相關內容出現在我們的姊妹網站 developer.chrome.com。該網站上的內容可能處於實驗階段，或目前僅支援 Chrome，但我們很希望您探索這些內容並提供意見。

現在的網路確實令人振奮。我們希望可以更快為您提供重要功能，並清楚說明現有的差距，讓網頁開發更有趣，減少挫敗感。

攝影：Cristofer Maximilian。