18

Firefox has implemented gap for flexbox layout, while other browsers such as Chrome only support gap for grid layout. This causes differences between browsers if you add gap on a flexbox container. The CSS @supports feature was made to handle situations where browsers do not yet support certain features. So how do you test for support of gap in flexbox?

<style>
.flex {
  display: flex;
  gap: 20px;
}
</style>

<section class="flex">
  <div>Item One</div>
  <div>Item Two</div>
</section>

Please note: Even if I use @supports grid-gap instead of gap, Firefox will still apply the gap to the flexbox container, while Chrome won't apply anything, so that solution won't work.

I am looking for consistency, as this is going to be a huge problem going forward if we start applying gaps to flexbox containers, and it works in newer implementations by browsers, but not in older implementations of the spec with no way of testing for support.

I am NOT looking for a JavaScript solution.

kukkuz
  • 41,512
  • 6
  • 59
  • 95
Daryl
  • 210
  • 2
  • 6
  • 1
    why not building the layout with supported features until gap is well supported? – Temani Afif Mar 27 '19 at 23:13
  • 1
    for flexboxes *gap* is relevant only layouts where *flex items* filling the *flex axis* and if they *wrap* into multiple lines.. why not use `margin` instead - see some examples [**`here`**](https://stackoverflow.com/questions/39386119/spacing-between-flex-elements/39386260#39386260), [**`here`**](https://stackoverflow.com/questions/39504320/5-items-per-row-auto-resize-items-in-flexbox/39504642#39504642) and [**`here`**](https://stackoverflow.com/questions/55176434/flex-to-ignore-side-margin-when-centering-elements/55176536#55176536) – kukkuz Mar 28 '19 at 01:20
  • 3
    The layout is already built using flexbox and margins as a default for browsers that don’t support grid. For browsers that do support grid, there is progressive enhancement (using @supports) to use gap and grid and get rid of the margins. The problem is Firefox supports grid but it *also* supports gap on flexbox. So I can’t get rid of the negative margins. So is there no way to differentiate between browser CSS support for gap in flexbox without JavaScript? Because this is exactly what @supports was supposed to be designed to do. – Daryl Mar 28 '19 at 14:16

3 Answers3

4

As far as I understand, there is no way to achieve this. It is still an open discussion

https://github.com/w3c/csswg-drafts/issues/3559.

https://medium.com/@schofeld/mind-the-flex-gap-c9cd1b4b35d8

Additional note: you'd probably want to star the request to add support on Chromium:

https://bugs.chromium.org/p/chromium/issues/detail?id=762679

gian1200
  • 3,670
  • 2
  • 30
  • 59
3

Old post, but anyway - besides new MacOS and iOS support of "gap" for Flexbox you still need to provide it for older versions of MacOS and iOS. Basically, simple check with @supports (gap: ... ) will not give anything correct because Safari thinks "oh, thats a gap in Gridbox". But - if you need to make this check - you won`t need to check support for "gap". You can write previously modern code with all that "gap" and then just use @support not (aspect-ratio: 1 / 1 ) (for example - you just need to check if old Safari really doesnt support such css tag ) - and then inside you can write a fallback options for old Safari. It works great)

Artur Ballod
  • 31
  • 1
0

Disclaimer: I'm not saying it's a perfect solution, but it is decent enough if you can allow for a very tiny margin of error. I would only use this to get some pixel perfect gaps here and there, I would NOT use this if your layout rely heavily on this to keep your page together.

An article out there mentions the use of @supports selector(:first-child) which can act as a proxy for support for flex gap, since the timeline release is identical:

For me it does the job very well if used properly, but you need to evaluate based on your project. More details available and credits goes to this article: https://birdsong.dev/blog/sloppy-supports-for-flexbox-gap/

Max
  • 169
  • 2
  • 11