- Bisher konnte man mit der CSS-Eigenschaft
gap zwar Abstände erzeugen, den Gap-Bereich selbst zu stylen war jedoch nicht möglich, sodass verschiedene Workarounds (zusätzliche Elemente, Border, Pseudo-Elemente usw.) nötig waren
- Das neue Feature CSS gap decorations ermöglicht es mit Eigenschaften wie
row-rule, column-rule usw., direkt Linien (Separatoren) zwischen Layout-Items zu zeichnen
- Dekorationen lassen sich in Grid, Flexbox, Multi-column und bald auch Masonry auf alle wichtigen Layouts anwenden, ohne zusätzliches Markup oder unnötige Elemente, sodass strukturelle und visuelle Verbesserungen allein mit reinem CSS möglich sind
- Verschiedene Styles (Dicke, Farbe, Muster usw.) werden mit Wiederholung/Kombination unterstützt und lassen sich mit
repeat(), outset, paint-order usw. präzise steuern
- Derzeit ist es nur mit aktivierter Flag in Chromium-basierten Browsern (Chrome/Edge 139+) nutzbar, während Standardisierung und Erweiterung weiterlaufen
Bisherige Grenzen von gap und was sich ändert
- Früher war es schwierig, den gap-Bereich zu stylen, und man musste Border für Separatoren oder künstliche Elemente hinzufügen
- Diese Vorgehensweisen hatten verschiedene Nachteile bei Layout-Größe, Barrierefreiheit und Markup-Komplexität
- Jetzt gibt es den Standard gap decorations, mit dem sich Dekorationen im Abstandbereich (z. B. Linien) mit einfachen CSS-Eigenschaften anwenden lassen
Einführung in CSS gap decorations
- column-rule: Wird bisher in Multi-column verwendet, um vertikale Trennlinien zu zeichnen (z. B.
column-rule: 1px solid black;)
- Diese Eigenschaft kann jetzt auch in Flexbox, Grid usw. verwendet werden
.my-grid-container {
display: grid;
gap: 2px;
column-rule: 2px solid pink;
}
- row-rule: Ermöglicht das Zeichnen von Separatoren zwischen Zeilen
.my-flex-container {
display: flex;
gap: 10px;
row-rule: 10px dotted limegreen;
column-rule: 5px dashed coral;
}
- Mehrere Styles wiederholen/kombinieren: Mit
repeat() oder kommagetrennter Schreibweise lassen sich verschiedene Styles mischen
.my-container {
display: grid;
gap: 2px;
row-rule:
repeat(2, 1px dashed red),
2px solid black,
repeat(auto, 1px dotted green);
}
- Eigenschaften für präzise Steuerung: Mit
row-rule-break, column-rule-break, row-rule-outset, column-rule-outset, gap-rule-paint-order usw. lassen sich Position, Kreuzungspunkte und Überlagerungsreihenfolge fein abstimmen
Beispiel: Praktischer Einsatz von gap decorations
- Auf der Beispielseite wird
body als Grid definiert, und header/nav/main/footer werden durch gaps getrennt
- Mit
row-rule lassen sich Trennlinien mit unterschiedlicher Dicke, Farbe und unterschiedlichem Stil anwenden
- Im nav-Menü werden mit Flexbox und
column-rule Linien zwischen den Einträgen gezeichnet
- Im main-Bereich werden Bilder und Text mit Flexbox in einer Masonry-artigen Form angeordnet, während
row-rule und column-rule die gitterartige Struktur betonen
- Mit
column-rule-outset: 0; usw. lassen sich Start- und Endposition der Linien präzise anpassen
Browser-Support und Aktivierung
- Derzeit ist in Chromium-basierten Browsern wie Chrome/Edge 139+ die Aktivierung einer Flag (
about://flags → Experimental Web Platform Features) erforderlich
- Die offizielle Standardisierung läuft noch, Feedback und Experimente sind ausdrücklich erwünscht
Mehr erfahren und Playground
Noch keine Kommentare.