The support gap problem

Developers consistently report two frustrations: building sites that behave consistently across browsers, and knowing when new features are safe to adopt. The gap property in flex layout is a case study in both problems.

gap originated in CSS Grid as grid-gap, along with grid-column-gap and grid-row-gap. Shortly after grid shipped, the properties were renamed to gap, row-gap, and column-gap, and the spec was extended to cover flex layout and multicol. The renaming avoided a mess of near-duplicate properties, but the rollout of the flex version was slow: Firefox shipped it in October 2018, Chrome followed in July 2020, and Safari in April 2021. That leaves a two-and-a-half-year window before cross-browser use was realistic—and in practice longer, once older browser versions are factored in.

Feature queries don't rescue the situation. Because gap is supported in grid, @supports (gap:1em) returns true even when the flex implementation is missing. You can't detect the gap in support that way.

Why support lags

These delays aren't a matter of one browser dragging its feet. Different features see different browsers take the lead. Grid layout itself was first prototyped by Microsoft in Internet Explorer 10. Subgrid research came largely from a Mozilla engineer, so Firefox shipped it first. Safari is driving some of the newer color functions.

Prototyping in one engine isn't itself a problem—CSS Working Group discussions involve all browser vendors and are meant to ensure features are implementable everywhere. But implementation work has to be scheduled against everything else a browser team is doing. Chromium's RenderingNG project, for example, required reimplementing grid layout before subgrid could land. The long gap between Firefox and Chromium shipping subgrid reflects that dependency, not neglect.

Two separate issues

The interoperability problem—the time between first and last browser shipping—is one half. The messaging problem is the other. New features get demos and buzz before they're in any stable browser, or while only one engine supports them, and developers are left to research support status on their own.

A growing part of the answer to the first problem is coordinated work across browser teams. Compat 2021 closed gaps on a number of features, including flex gap. Interop 2022 targets 15 features, with progress tracked on the Interop 2022 dashboard.

On the messaging side, the shift is toward publishing content that helps developers use features safely. That means courses—Learn CSS, Learn Forms, Learn Design, and Learn PWA are all available—and a push to focus coverage on features that are ready for production use. Documentation support extends beyond the site, too, through contributions to Open Web Docs, which powers MDN's compatibility data. That same data now drives browser support indicators inline on web.dev articles, showing at a glance, for instance, that flex gap requires Chrome and Edge 84, Firefox 63, or Safari 14.1.

Experimental and Chrome-only features will increasingly be covered on developer.chrome.com rather than web.dev, with an explicit invite for feedback on early-stage work. The goal is to get features into developers' hands faster while being honest about where the remaining gaps are.