消除差距

簡化網頁建構作業。

Rachel Andrew

無論是與開發人員個別交流，還是透過 CSS 現況等問卷調查，我們都一再聽到相同的意見。開發人員很難製作出在各種瀏覽器上都能正常運作的網站和應用程式，也很難判斷何時可以安全使用令人期待的新功能。

Flexbox 間距

舉例來說，gap 屬性可讓您在格線或彈性項目之間，或多欄容器中的欄之間建立間隔。雖然我們在多欄中已有 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 才開始支援這項功能，Safari 則是在 2021 年 4 月跟進。這表示我們需要等待兩年六個月，才能安全使用 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，但我們歡迎您探索並提供意見。

現在是網路發展的精彩時刻。我們希望協助您更快取得重要功能，並清楚瞭解現有的差距，讓網頁開發更具趣味性，減少挫折感。