Właściwość box-decoration-break w Chrome 130

Rachel Andrew

Opublikowano: 11 października 2024 r.

W Chrome 130 dostępna jest właściwość CSS box-decoration-break o wartości clone z obsługą fragmentacji w wierszu i bloku. Z tego posta dowiesz się, dlaczego i jak z niej korzystać.

Fragmentacja w tekście

Fragmentacja w wierszu występuje, gdy element w wierszu, np. ciąg tekstu, jest dzielony na kilka wierszy. Elementy wbudowane mają pole, o którym zwykle nie musisz myśleć, chyba że spróbujesz dodać do elementu tło lub obramowanie. W tym przykładzie do elementu span dodano tło z border-radius. Obramowanie jest zakrzywione tylko na początku i na końcu ciągu znaków.

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

Początkowa wartość box-decoration-break to slice, co daje efekt podzielenia pól na części. Nowo obsługiwany styl box-decoration-break: cloneoznacza jednak, że każda linia zaczyna się i kończy zaokrągloną krawędzią.

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

Fragmentacja bloków

Fragmentacja bloków występuje, gdy dzielisz treść na kolumny za pomocą układu wielokolumnowego lub gdy drukujesz, a treść dzieli się na strony.

W poniższym przykładzie treść jest podzielona na kolumny, a każdy akapit ma obramowanie. Przy początkowej wartości slice pola są dzielone u dołu i u góry kolumn.

.columns {
  column-count: 5;
}

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

W przypadku box-decoration-break: clone, gdy pole jest podzielone na fragmenty, każdy z nich jest otoczony ramką.

.columns {
  column-count: 5;
}

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

To samo dzieje się w przypadku obramowań pól, które są dzielone podczas drukowania strony. Jeśli pole jest podzielone na 2 strony, obramowanie pola zostanie dokończone na pierwszej stronie, a na drugiej stronie otworzy się nowe pole.