Lückenverzierungen: Jetzt verfügbar in Chromium

Javier Contreras
Javier Contreras
LinkedIn
Sam Davis Omekara
Sam Davis Omekara
LinkedIn

Veröffentlicht am 15. Mai 2026

CSS-Lückendekorationen sind ab Version 149 in Chrome und Edge verfügbar. Sie können die Lücken zwischen Raster-, Flexbox- und mehrspaltigen Layouts gestalten, ohne Rahmen oder Pseudoelemente zu verwenden. Diese Funktion wurde in Zusammenarbeit zwischen den Microsoft Edge- und Google Chrome-Teams entwickelt.

Das Problem

Ein Rasterlayout mit Linien zwischen Spalten und Zeilen.

Für das Gestalten von Lücken zwischen Layout-Elementen waren bisher immer Problemumgehungen erforderlich. Rahmen für einzelne Elemente, Pseudoelemente, Hintergrund-Hacks. Diese Ansätze haben Nachteile:

  • Sie sind von der Struktur abhängig. Wenn Sie einen visuellen Trenner hinzufügen möchten, müssen Sie Ihr Markup ändern oder Selektoren für bestimmte Elemente schreiben.
  • Sie beeinträchtigen die Barrierefreiheit. Zusätzliche DOM-Elemente werden im Barrierefreiheitsbaum angezeigt, obwohl sie dort nicht sein sollten.
  • Sie sind schwer zu verwalten. Responsive Layouts verändern die Annahmen, auf denen Ihre Lückengestaltung basiert.
  • Sie beeinträchtigen die Leistung. Mehr DOM-Knoten, mehr Layout-Arbeit.
  • Sie sind nicht benutzerfreundlich. Oft waren komplexe geometrische Berechnungen erforderlich, damit alles richtig funktioniert.

Mit der Eigenschaft column-rule können Lückendekorationen für mehrspaltige Layouts festgelegt werden. Für Raster und Flexbox gab es bisher keine entsprechende Funktion.

Die Lösung

In Raster- und Flexbox-Containern kann jetzt column-rule verwendet werden. Mit der neuen Eigenschaft row-rule können horizontale Lücken gestaltet werden. Diese Dekorationen sind rein visuell und wirken sich nicht auf vorhandene Layouts aus. Wenn Sie die Eigenschaft column-rule in mehrspaltigen Layouts verwenden, bleibt das bisherige Verhalten unverändert.

Hier sehen Sie beispielsweise einen Flex-Container mit drei Bereichen, in dem eine Liste von Stilen für die Spalten- und Zeilenregeln verwendet wird:

.flex-split {
  column-rule-width: 2px;
  column-rule-style: dashed, solid;
  column-rule-color: #d4d0c8;
}
Ein Layout mit drei Bereichen und Spaltenregeln.
Demo mit geteiltem Bildschirm und Lückendekorationen ausprobieren

Wie in diesem Beispiel gezeigt, akzeptieren sowohl row-rule als auch column-rule dieselbe Kurzform für Breite, Stil und Farbe. Mit der Kurzform rule können Sie beide gleichzeitig festlegen.

Neue Eigenschaften

Wir haben jedoch nicht nur column-rule für andere Layoutmodi eingeführt und die entsprechende row-Eigenschaft hinzugefügt. Außerdem haben wir Steuerelemente für die Feinabstimmung Ihrer Dekorationen eingeführt: wie sie an Schnittpunkten unterbrochen werden, wie weit sie von den Lückenrändern eingerückt sind, wann sie relativ zu Elementen angezeigt werden und wie Sie Stile für verschiedene Lücken festlegen können. Regelbreite, -farbe und -einrückungen können auch animiert werden.

Die Syntax repeat()

Für die Werte für Breite, Stil und Farbe von Lückendekorationen kann repeat() verwendet werden. So können Sie Dekorationen für verschiedene Lücken in Kurzform festlegen, ähnlich wie bei der Syntax repeat(), die für die Definition von Spuren in Rastern verwendet wird:

.settings-panel {
  row-rule: 1px solid #243352;
  row-rule-width: repeat(2, 1px), 4px;
}
Eine Liste von Einstellungen mit Zeilenregeln.
Demo mit Einstellungen und Lückendekorationen ausprobieren

Dadurch erhalten die ersten beiden Zeilenlücken eine 1-Pixel-Regel und die dritte eine 4-Pixel-Regel. Wenn es mehr Lücken als Werte gibt, wird wieder von vorn begonnen. Sie können auch mehrere Werte direkt ohne repeat() übergeben. Beispiel: Abwechselnde Zeilenregelstile für Stunden- und Halbstundengrenzen in einem Kalender:

.calendar {
  row-rule-width: 2px, 1px;
  row-rule-style: solid, dashed;
  row-rule-color: #e8e4df, #f0ece7;
}
Ein Kalenderlayout mit abwechselnden Rändern.
Demo mit Kalender und Lückendekorationen ausprobieren. In dieser Demo wird zwischen einer durchgezogenen Regel für Stundengrenzen und einer gestrichelten Regel für Halbstunden gewechselt.

Unterbrechungen von Dekorationen steuern

Mit den Eigenschaften column-rule-break und row-rule-break wird gesteuert, wie sich Dekorationen an Schnittpunkten von Lücken verhalten:

  • normal (Standard): Das Verhalten hängt vom Containertyp ab. Weitere Informationen finden Sie in der Spezifikation.
  • none: Dekorationen werden an Schnittpunkten nicht unterbrochen.
  • intersection: Dekorationen werden unterbrochen, wo sich Zeilen- und Spaltenlücken kreuzen.

Wenn Sie beispielsweise rule-break in einem Rastercontainer auf intersection setzen, werden Regeln an Schnittpunkten von Lücken unterbrochen, anstatt fortgesetzt zu werden:

.dashboard {
  column-rule-style: solid;
  column-rule-color: #fbbf24, #34d399;
  column-rule-width: 1px, 3px;
  column-rule-break: intersection;
  row-rule: 1px solid #1e1e36;
}
Ein Dashboard-Layout mit Spaltenregeln.
Demo mit Dashboard-Raster und Lückendekorationen ausprobieren.

Wenn Sie rule-break auf none setzen, werden die Regeln an Schnittpunkten nicht unterbrochen:

.grid {
  column-rule: 1px solid #5a9e9e;
  row-rule: 1px solid #c27a6b;
  rule-break: none;
}

Sie können diesen Wert im interaktiven Playground ausprobieren.

Dekorationen erweitern oder verkleinern

Mit den Eigenschaften column-rule-inset und row-rule-inset wird gesteuert, wie weit sich Dekorationen in einer Lücke erstrecken. Mit der Kurzform können Sie Einrückungen für alle Seiten gleichzeitig festlegen. Alternativ können Sie Einrückungen asymmetrisch mit column-rule-inset-cap (für Endpunkte ohne sich kreuzende Lücken) und column-rule-inset-junction (für Endpunkte, die sich mit anderen Lücken kreuzen) festlegen.

Als Werte können Längen, Prozentsätze oder das Keyword overlap-join verwendet werden, mit dem Lückendekorationen in Ecken zusammengeführt werden. Wenn Sie beispielsweise rule-inset auf 5 Pixel setzen, werden alle Dekorationen um 5 Pixel nach innen verkleinert:

.container {
  display: flex;
  flex-wrap: wrap;
  column-rule: 1px solid #2a2a45;
  column-rule-color: #60a5fa, #34d399, #a78bfa;
  rule-inset: 5px;
  row-rule: 1px solid #2a2a45;
}
Ein Dashboard-Raster mit Linien.
Demo mit dynamischen Flex-Elementen und Lückendekorationen ausprobieren.

Wenn Sie rule-inset-cap auf 0 Pixel und rule-inset-junction auf 10 Pixel setzen, sind die Dekorationen an den Containerrändern bündig, aber an Schnittpunkten eingerückt. In der oben gezeigten Dashboard-Demo wird dieser Ansatz verwendet. Die Einrückungen werden beim Hovern animiert:

.dashboard {
  rule-inset-cap: 0px;
  rule-inset-junction: 10px;
  transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
  rule-inset-junction: 0px;
}
Ein Dashboard-Layout mit Spaltenregeln.
Demo mit Dashboard-Raster und Lückendekorationen ausprobieren.

Sichtbarkeit

Mit den Eigenschaften column-rule-visibility-items und row-rule-visibility-items wird gesteuert, wann Regeln basierend auf der Nähe von Elementen angezeigt werden:

  • normal (Standard): Hängt vom Containertyp ab.
  • all: Regeln werden in jeder Lücke angezeigt, auch in leeren Lücken.
  • around: Regeln werden überall angezeigt, wo sich ein oder mehrere angrenzende Elemente befinden.
  • between: Regeln werden nur zwischen zwei angrenzenden Elementen angezeigt.

Mit der Kurzform rule-visibility-items können Sie beide gleichzeitig festlegen. Wenn Sie rule-visibility-items auf between setzen, werden Regeln nur zwischen angrenzenden Elementen angezeigt:

section {
  rule: 2px solid black;
  rule-visibility-items: between;
}
Ein redaktionelles Layout mit Linien zwischen Zeilen und Spalten.
Demo mit Artikelraster und Lückendekorationen ausprobieren.

Wenn Sie rule-visibility-items auf all setzen, werden Regeln in jeder Lücke angezeigt, auch in Lücken ohne angrenzende Elemente:

section {
  rule: 2px solid black;
  rule-visibility-items: all;
}

Ändern Sie den Wert in der Live-Demo, um den Unterschied zu sehen.

Dekorationen animieren

Regelbreite, -farbe und -einrückungen können animiert werden. Sie können sie beim Hovern oder bei jeder anderen Statusänderung überblenden. In der oben gezeigten Dashboard-Demo werden die Farben und Einrückungen der Regeln beim Hovern überblendet:

.dashboard {
  column-rule-color: #fbbf24, #34d399;
  rule-inset-junction: 10px;
  transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}

.dashboard:hover {
  column-rule-color: #3b82f6, #3b82f6;
  rule-inset-junction: 0px;
}

Demos

Alle in diesem Beitrag gezeigten Demos sind auf der Edge-Demowebsite verfügbar.

Im Blogbeitrag zur Entwicklervorschau finden Sie weitere Demos, darunter einen interaktiven Playground, einen Burgermenü, ein Notizbuchlayout, und ein Layout im Magazinstil mit einem Sudoku-Raster.

Änderungen seit der Entwicklervorschau

Wenn Sie Lückendekorationen während der Entwicklervorschau (Chrome 139) ausprobiert haben, beachten Sie die folgenden Änderungen:

  • Die Funktion ist standardmäßig verfügbar. Es sind keine Flags erforderlich.
  • Einige Attributnamen wurden aktualisiert, um der neuesten Spezifikation zu entsprechen (z. B. wurden column-rule-outset und row-rule-outset in column-rule-inset und row-rule-inset umbenannt).
  • Die Eigenschaften column-rule-visibility-items und row-rule-visibility-items wurden hinzugefügt.
  • Unterstützung für Animationen wurde hinzugefügt.

Lückendekorationen jetzt verwenden

Lückendekorationen funktionieren ab Version 149 in Chrome und Edge. Wenn Ihre Lückendekorationen rein dekorativ sind, ist die Funktion eine progressive Verbesserung. In Browsern ohne Unterstützung werden Lücken normal ohne sichtbare Dekorationen gerendert. Für Browser, die die Funktion noch nicht unterstützen, wird ein Polyfill entwickelt.

Melden Sie Fehler im Chromium-Issue-Tracker. Weitere Informationen finden Sie in der Spezifikation zu CSS-Lückendekorationen.