Neue Möglichkeit, Lücken in CSS zu stylen

Sam Davis Omekara

Patrick Brosset

Veröffentlicht: 11. Juni 2025

Schluss mit Rahmen- und Pseudoelement-Hacks – jetzt gibt es CSS-Abstanddekorationen.

Das Microsoft Edge-Team freut sich, Ihnen mitteilen zu können, dass CSS-Abstanddekorationen, eine neue Möglichkeit, die Lücken zwischen Elementen in Flex-, Grid- und mehrspaltigen Layouts zu gestalten, jetzt für Entwickler in Chrome und Edge 139 als Testversion verfügbar sind.

Probieren Sie sie aus und geben Sie uns Feedback, damit wir die API weiter optimieren können.

Nützliche Links

• Spezifikation
• Blogpost zur Ankündigung von Microsoft Edge
• Erläuterung

Problem

Durch das Stilisieren von Lücken in UI-Komponenten wie Kalendern, Karten oder Datenrastern lässt sich die Lesbarkeit erheblich verbessern und die Gesamtästhetik verbessern. Um diesen Effekt in Grid- und Flexbox-Layouts zu erzielen, waren jedoch bisher umständliche Umwege mit Rahmen, Pseudoelementen oder Hintergrundtricks erforderlich. Diese Umgehungslösungen können aus verschiedenen Gründen problematisch sein.

• Nicht intuitiv: Sie führen strukturelle Abhängigkeiten für das visuelle Styling ein, was gegen die Prinzipien der semantischen HTML-Programmierung verstößt.
• Barrierefrei nicht geeignet:Sie erfordern oft zusätzliche DOM-Elemente, die die Funktion von Hilfstechnologien wie Screenreadern beeinträchtigen können.
• Schwierig zu pflegen: Sie erfordern eine komplizierte Layoutlogik und erschweren ein einheitliches Styling der Komponenten.
• Schlecht für die Leistung:Durch diese Umgehungslösungen werden dem DOM möglicherweise unnötige Elemente hinzugefügt, was zu Leistungsproblemen führen kann.

Die Webplattform unterstützt zwar bereits Lücken mit dem Attribut column-rule, dies ist jedoch derzeit nur auf mehrspaltige Layouts beschränkt. Webentwickler haben schon lange eine einheitliche Möglichkeit gefordert, Lücken in anderen relevanten Layouttypen wie Grid und Flexbox zu stylen.

Die Lösung: CSS-Abstanddekorationen

Mit Abstanddekorationen wird das column-rule-Attribut erweitert, sodass es auch mit anderen Layouttypen wie „Grid“ und „Flexbox“ verwendet werden kann. Außerdem wird das neue row-rule-Attribut eingeführt, das es ergänzt. So wird für mehr Einheitlichkeit und neue Anpassungsmöglichkeiten bei der Gestaltung von Lücken in verschiedenen Layouttypen gesorgt.

CSS-Lückendekorationen bieten folgende Vorteile:

• Kein Einfluss auf das Layout:Die Verzierungen sind rein visuell. Sie wirken sich nicht auf das Layout oder den Abstand aus, sodass Sie sie verwenden können, ohne bestehende Designs zu beeinträchtigen.
• Wiederholsyntax: Ähnlich wie bei CSS-Rastern können Sie mit der repeat()-Syntax Muster von Verzierungen in verschiedenen Teilen eines Containers erstellen. So lassen sich ansprechende, einheitliche Designs mit minimalem CSS erstellen.
• Reineres Markup:Es sind keine zusätzlichen Elemente oder Pseudoelemente erforderlich. Sie können Lücken direkt stylen.
• Anpassbarkeit:Neue CSS-Properties wie *rule-break, *rule-outset und gap-rule-paint-order bieten mehr Anpassungsoptionen als das traditionelle Regeln-Styling für Breite, Stil und Farbe.

Mit CSS-Abstanddekorationen ist es einfacher denn je, visuell ansprechende und einfach zu pflegende Seitenlayouts zu erstellen.

Lückenverzierungen in Aktion

Wenn Sie CSS-Lückendekorationen ausprobieren möchten, verwenden Sie einen Browser, der sie unterstützt: Edge oder Chrome ab Version 139. Aktivieren Sie die Option Experimentelle Webplattformfunktionen aktivieren, indem Sie edge://flags oder chrome://flags eingeben.

Interaktives Entwickler-Sandbox-Tool

Wenn Sie die verschiedenen Layouts ausprobieren möchten, in denen CSS-Abstanddekorationen unterstützt werden, und alle neuen Eigenschaften kennenlernen möchten, probieren Sie unseren interaktiven Entwickler-Spielplatz aus.

Dreistrich-Menü

In der Demo für ein Dreistrich-Menü wird gezeigt, wie Sie mit der Property column-rule-break: intersection die Dekorationen für Spaltenlücken an jeder sichtbaren Kreuzung mit Zeilenlücken unterbrechen.

In der Demo wird column-rule-offset: -15px auch verwendet, um die Länge der Verzierungen anzupassen und sie von den Rändern der Kreuzungen wegzuziehen.

Notizbuch

In der Notebook-Demo sorgt row-rule-break: none dafür, dass Zeilenverzierungen an Kreuzungen nicht unterbrochen werden, sondern kontinuierlich von links nach rechts durch den Container laufen. Mit column-rule-break: spanning-item wird dagegen verhindert, dass Säulenverzierungen hinter Elementen mit Überlappung dargestellt werden. Sie beginnen und enden an Elementen mit Überlappung und bilden eine sichtbare T-Kreuzung.

Mit der row-rule-Property und der repeat()-Funktion können Sie genau steuern, wie Lückenverzierungen in verschiedenen Bereichen des Layouts angewendet werden. So können Sie ein Stilmuster erstellen, bei dem Zeilenregeln in der Kopf- und Fußzeile ausgeblendet, um den Hauptinhalt herum dicker und an anderer Stelle dezenter sind.

Tägliche CSS-Nachrichten

Die Demo für die täglichen CSS-Nachrichten verwendet ein Layout im Magazinstil und definiert CSS-Abstanddekorationen in mehreren Grid- und Flexbox-Containern.

Sehen Sie sich das Sudoku-Spiel rechts an. Hier wird ein 9 × 9 Raster und das Wiederholungsmuster verwendet, um die dünnen und dicken Linien zwischen Zeilen und Spalten zu zeichnen:

.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 6px;
  column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  column-rule-style: solid;
  column-rule-color: var(--secondary);
  row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  row-rule-style: solid;
  row-rule-color: var(--secondary);
}

Feedback einholen

Wir freuen uns, dass Sie die Lückendekorationen von CSS ausprobieren. Wir sind der Meinung, dass damit ein häufiges Problem gelöst wird. Wir würden uns sehr über Feedback zu dieser Funktion freuen, damit wir sie an Ihre Anforderungen anpassen können.

Die CSS-Funktion für Lückendekorationen wird derzeit in Chromium implementiert. Wenn Sie die Funktion testen, beachten Sie bitte, dass wir sie noch aktiv entwickeln und dass es möglicherweise zu Fällen kommt, in denen sie nicht wie erwartet funktioniert. Zu den aktuellen Einschränkungen gehören die Animation von Lückenverzierungen und die Verwendung einer sehr großen Anzahl von Rasterspuren.

Wenn Sie einen Fehler finden oder Ideen zur Funktion haben, teilen Sie uns dies mit. Öffnen Sie dazu einen neuen Chromium-Fehlerbericht.