消除差距

建構網頁更輕鬆。

瑞秋安德魯

和開發人員溝通時，無論是個人或 CSS 現狀等問卷調查，我們都會聽到相同的意見。開發人員很難確保網站和應用程式在各種瀏覽器中都能順暢運作，而且很難知道哪些令人耳目一新的新功能可以安全使用。

Flexbox 缺口

舉例來說，gap 屬性可讓您填補 grid 和 Flex 項目，或 multicol 容器中的欄。雖然我們長期在 Multicol 中採用 column-gap，但屬性首次在格狀版面配置中顯示為 grid-gap，以及 grid-column-gap 和 grid-row-gap。

在瀏覽器中的格狀版面配置剛好到達瀏覽器後，屬性已重新命名為 gap，以及 row-gap 和 column-gap。隨後指定在 Flex 版面配置中運作。換句話說，我們沒有多個屬性執行相同動作。

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

Firefox 也在 2018 年 10 月推出了彈性版面配置的屬性。直到 2020 年 7 月才在 Chrome 中顯示，而在 2021 年 4 月是 Safari 為止。這表示我們相隔兩年到六個月後，才能安全地使用 gap。事實上，對大多數開發人員而言，等待的時間已經較長，因為需要支援比最新版本瀏覽器更早的版本。在彈性版面配置中支援 gap 會造成更加問題，原因是我們無法使用功能查詢來偵測 Flex 版面配置中的差距支援。由於格線支援 gap 屬性，@supports (gap:1em) 會傳回 true。

另一個問題是，當某個瀏覽器推出新功能時，使用者就會開始討論並分享示範內容。而且此時間通常從所有穩定版瀏覽器中都能開始運作。這可能會對開發人員造成困擾，或至少讓使用者感到困擾。一直以來，我們不斷談論到世界各地的新奇功能，發現他們因缺乏支援而無法實際使用。

為什麼支援有所差異？

這不是指將手指指向某個瀏覽器，會造成速度緩慢的文章。觀察各種平台功能，您會發現不同瀏覽器率先採用各種功能。

大部分的功能都可在單一瀏覽器中設計原型。例如，格狀版面配置規格是先由 Microsoft 建立，並且在 Internet Explorer 10 中以初始格式實作。Mozilla 的工程師投入了大量心力，找出子網格的行為方式，因此在 Firefox 中率先推出這項功能。我們看到 Safari 多半使用令人耳目一新的色彩功能。

雖然只有一個瀏覽器可能主導原型設計，但 CSS 工作團隊中所有瀏覽器 (和其他機構) 的代表都會討論 CSS 功能。這項功能要在所有瀏覽器中導入是非常重要的，而且設計方式時也不可能在瀏覽器中執行此功能。這會導致支援人員持續落差，且無法採用此功能。

不過，當您要實作某項功能時，該功能必須同時優先於該瀏覽器的所有可用功能。此外，有時必須進行其他工作，才能改善瀏覽器。舉例來說，Chromium 的 RenderingNG 功能便可以發揮作用。此舉已經為 Subgrid 的實作奠定了基礎；不過，由於在新的轉譯引擎中重新導入格狀版面配置，因此 Firefox 和 Chromium 的運送子網格之間存在較長的差距。

問題所在

這裡有兩個問題。首先是互通性問題，從功能進入單一瀏覽器到全面支援這項功能，需要相當長的時間。

其次是傳訊問題我們要如何清楚釐清支援落差的部分？我們要如何分享新功能，但又不想讓所有人都必須仔細研究每項內容，才能獲得妥善支援？

互通性

各款瀏覽器已搭配運作，可解決互通性問題。去年 Compat 2021 成功縮小了對許多功能的支援差距，包括 Flex 版面配置中的 Gap 屬性。今年 Interop 2022 著重在 15 項功能，這些功能也已進入市場。

您可以在 Interop 2022 資訊主頁中查看進度。

訊息

第二個問題是，我們希望能在 web.dev 和 developer.chrome.com 上討論各項功能，因此非常樂意提供協助。我希望讀者在閱讀內容時，能清楚瞭解各項功能的狀態，以及提供有關支援問題的實用方法。

我們已經推出許多基礎課程，日後還會有更多課程。這些課程會說明如何利用核心網路平台技術，針對現代網路建構應用程式。退房日期：

我們正努力將本網站的內容集中在可安全使用的事項上，這個階段還未及時。不過，在接下來的幾個月內，您應該還會看到一些實際變革的趨勢。

此外，我們也透過支援開啟網路文件專案，為開放網路說明文件貢獻心力。這可確保我們提供 MDN 的頂級說明文件，以及最新的瀏覽器相容性資料。並在 web.dev 使用這項資料，藉此展現對各項功能的支援。以下是目前在 Flex 版面配置中支援 gap。

瀏覽器支援

  • 84
  • 84
  • 63
  • 14.1

如果您想進一步瞭解 Chrome 對網路的願景，也就是我們在「起源」和「開發人員試用」階段進行了實驗，之後會在我們的同系列網站 (developer.chrome.com) 上深入研究。有些內容或許仍在實驗階段，或者僅支援 Chrome，但我們希望您能探索其中內容，並提供意見回饋。

真是個令人興奮的新時代，是網路使用者不可或缺的一環。我們希望能幫助我們更快將重要功能提供給您，並清楚說明存在的漏洞，進而使網頁開發變得更有趣、更令人困惑。

相片提供者：Cristofer Maximilian。