Yay, it’s here! Safari 14.1 reportedly adds support for the gap
property in flexbox layouts. We’ve had grid-gap
support for some time, but true to its name, it’s limited to grid layouts. Now we can use gap
in either type of layout:
.container {
display: flex;
flex-flow: row wrap;
gap: 1.5rem;
}
Apple’s been rather quiet about the update. I didn’t even hear about it until Eric Meyer brought it up in an email, and he only heard about it when Jen Simmons tweeted it out.
I checked the WebKit CSS Feature Status and, sure enough, it’s supported. It just wasn’t called out in the release notes. Nothing is posted to Safari’s release notes archive just yet, so maybe we’ll hear about it officially there at some point. For now, it seems that Maximiliano Firtman‘s overview of iOS 14.5 is the deepest look at what’s new.
And how timely is it that Eric recently covered how to use the gap
property, not only in grid and flexbox layouts, but multi-column as well.
Warning:
Apple has pulled Safari 14.1 update for Mojave and Catalina: https://eclecticlight.co/2021/04/30/apple-has-pulled-safari-14-1-update-for-mojave-and-catalina/
Oh geez! Thanks for the heads up.
It’s such a practical feature. But what about horizontal-gap and vertical-gap, was not it better? In the other hand second parameter?
Grid still supports that I think? No? Flexbox is just one-directional so I guess it makes sense that it doesn’t, although I could imagine a world where that second param is the spacing between rows when flexbox wraps.
About flippin’ time. They also introduced support for
<input type="date/time/datetime">
, I believe. Perhaps they’re keeping it quiet because they’re embarrassed at how long it’s taken them.Safari is the new IE.
I’m starting to see why it was probably pretty vital for Jen Simmons to jump ship from Mozilla to Safari, but if she’s whipping it into shape at Apple, I’m all for it.
Here are the release notes: https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/
One thing which is missing there is correct support of scroll-margin and scroll-padding – the end of negative-margin + positive-padding hack for scrolling to anchor when having fixed navbar.
Frekin’ FINALLY!!!
Ok, that’s a good news, but i think we’re not going to use this for… at least two years, because of retrocompatibility?
Happy and sad at the same time.
I am so waiting for Lazy Load. Now it’s natively everywhere, but not yet in Safari.