Eigenschaft „box-decoration-break“ in Chrome 130

Rachel Andrew

Veröffentlicht am 11. Oktober 2024

In Chrome 130 ist die box-decoration-break CSS-Eigenschaft mit dem Wert clone verfügbar, mit Unterstützung für Inline- und Blockfragmentierung. In diesem Beitrag wird erläutert, warum und wie Sie sie verwenden.

Inline-Fragmentierung

Die Inline-Fragmentierung tritt auf, wenn ein Inline-Element, z. B. eine Textzeile, über mehrere Zeilen verteilt wird. Inline-Elemente haben ein Feld, über das Sie normalerweise nicht nachdenken müssen, es sei denn, Sie versuchen, dem Element einen Hintergrund oder Rahmen hinzuzufügen. Im folgenden Beispiel wird einem `span` ein Hintergrund mit einem border-radius hinzugefügt. Der Rahmen ist nur am Anfang und Ende des Strings abgerundet.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
}

Eine umgebrochene Textzeile mit einem Hintergrund, der an der Stelle des Umbruchs abgeschnitten wird.

Der Anfangswert von box-decoration-break ist slice, wodurch dieser geschnittene Effekt auf die Felder entsteht. Mit dem neu unterstützten box-decoration-break: clone beginnt und endet jede Zeile jedoch mit dem abgerundeten Rahmen.

span {
  background-color: #002856;
  color: #fff;
  border-radius: 0.5em;
  border: 2px solid black;
  box-decoration-break: clone;
}

Eine umgebrochene Textzeile mit einem Hintergrund mit abgerundeten Ecken an den Umbruchstellen.

Blockfragmentierung

Die Blockfragmentierung tritt auf, wenn Sie Inhalte mit einem mehrspaltigen Layout in Spalten aufteilen oder wenn Sie drucken und die Inhalte auf Seiten aufgeteilt werden.

Im folgenden Beispiel werden Inhalte in Spalten aufgeteilt und jeder Absatz hat einen Rahmen. Mit dem Anfangswert slice werden die Felder unten und oben in den Spalten geschnitten.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
}

Mehrere Spalten mit unterteilten Feldern

Bei box-decoration-break: clone wird jedes Fragment mit dem Rahmen umbrochen, wenn ein Feld fragmentiert wird.

.columns {
  column-count: 5;
}

.columns p {
  border: 5px solid #34c9eb;
  padding: 0.5em;
  box-decoration-break: clone;
}

Mehrere Spalten mit geklonten Feldern

Dasselbe passiert, wenn Sie Rahmen auf Feldern haben, die beim Drucken der Seite fragmentiert werden. Wenn ein Feld auf zwei Seiten aufgeteilt wird, wird der Rahmen des Felds auf der ersten Seite vervollständigt und dann auf der zweiten Seite ein neues Feld geöffnet.