消除差距

更輕鬆地建構網路。

Rachel Andrew

無論是與開發人員個別交談，還是透過CSS 現況等問卷調查，我們都會聽到相同的意見。開發人員都覺得，要讓網站和應用程式在各種瀏覽器上都能順利運作，卻很難知道有哪些值得期待的新功能可以安全使用。

Flexbox 間距

舉例來說，gap 屬性是有問題的屬性，您可以讓 Grid/flex 項目或 multicol 容器中的資料欄之間出現落差。雖然我們長期以來都支援 column-gap，但該屬性最初是以格狀版面配置顯示 grid-gap，以及 grid-column-gap 和 grid-row-gap。

在瀏覽器支援格線版面配置後，此屬性與 row-gap 和 column-gap 一併重新命名為 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 協助解決許多功能的支援差距，包括 Flex 版面配置中的 gap 屬性。2022 年 Interop 2022：將重點放在 15 個功能上，其中部分項目已有移動。

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

訊息

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

我們推出了一些基礎課程，日後還會陸續推出更多課程。這些課程可協助您瞭解如何使用核心網路平台技術，打造新型網路。退房日期：

• 學習 CSS
• 瞭解表單
• 學習設計
• 瞭解 PWA

因此，我們正全力將本網站的內容重點放在你可以放心使用的項目上。我們尚未完全實現這項目標，但在未來幾個月，你應該會開始看到我們朝著實用性方向前進。

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

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

目前是網頁的黃金時期，我們希望能幫助您更快地提供主要功能，並清楚瞭解現有的缺口，使得網頁開發變得更有趣，使用起來更順暢無礙。

相片來源：Cristofer Maximilian。