Ich habe das neulich über die Berichterstattung von Michelle Barker erwähnt, aber hier verlinke ich zu der offiziellen Ankündigung. Die Hauptsache ist, dass wir gap mit flexbox erhalten werden, was bedeutet
.flex-parent {
display: flex;
gap: 1rem;
}
.flex-child {
flex: 1;
}Das ist ausgezeichnet, da es bisher schwierig war, Abstände zwischen Flex-Items zu schaffen. Wir haben `justify-content: space-between`, was manchmal nett ist, aber es erlaubt Ihnen nicht, dem Flex-Container explizit *mitzuteilen*, *wie viel* Abstand Sie wünschen. Dafür würden wir normalerweise `margin` verwenden, aber das bedeutet, dass man den `margin` auf dem ersten oder letzten Element *vermeiden* muss, abhängig von der Richtung des `margin` – was ärgerlich und kompliziert wird.
Wir haben `gap` in CSS Grid und es ist viel besser. Es ist großartig, es auch in Flexbox zu haben.
Aber es wird für eine Weile seltsam werden. Safari unterstützt es noch nicht (genauso wenig wie das stabile Chrome), daher können wir es nicht einfach ausrollen und erwarten, dass es mit Flexbox funktioniert. Aber sollten wir heutzutage nicht eine `@supports`-Abfrage verwenden können?
/* Nope, sorry. This "works" but it doesn't
actually tell you if it works in *flexbox* or not.
This works in grid in most browsers now, so it will pass. */
@supports (gap: 1rem) {
.flex-parent {
gap: 1rem;
}
}Das wurde seltsam, weil `grid-gap` zugunsten von nur `gap` fallen gelassen wurde. Ich bin sicher, `grid-gap` wird für immer unterstützt werden, denn so laufen diese Dinge generell ab, aber wir werden ermutigt, stattdessen `gap` zu verwenden. Man könnte also sagen, `gap` ist ein wenig überladen, aber das wird sich mit der Zeit (vielleicht *ein Jahr*?) legen. Es wird dadurch ein wenig komplizierter, dass `column-gap` nun auch zu `gap` wird. `gap` hat eine ganze Menge Aufgaben.
Ich bin trotz der Überladung immer noch für die Änderung. Einfachere mentale Modelle sind für die langfristige Entwicklung wichtig, und es gibt nichts, was CSS für das Styling im Browser herausfordern würde. Ich wette, meine zweijährige Tochter wird in ihrem Leben CSS schreiben.