La proprietà box-decoration-break in Chrome 130

Rachel Andrew

Data di pubblicazione: 11 ottobre 2024

In Chrome 130 è disponibile la proprietà CSS box-decoration-break con un valore di clone, con supporto per la frammentazione in linea e a blocchi. Questo post spiega perché e come utilizzarlo.

Frammentazione in linea

La frammentazione in linea si verifica quando un elemento in linea, ad esempio una stringa di testo, si interrompe su più righe. Gli elementi in linea hanno una casella, a cui in genere non devi pensare, a meno che tu non provi ad aggiungere uno sfondo o un bordo all'elemento. Nell'esempio seguente, a uno span viene aggiunto uno sfondo con un border-radius. Il bordo è curvo solo all'inizio e alla fine della stringa.

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

Una riga di testo a capo con uno sfondo tagliato nel punto in cui va a capo.

Il valore iniziale di box-decoration-break è slice, il che conferisce questo effetto tagliato alle scatole. Il nuovo supporto di box-decoration-break: clone significa, invece, che ogni linea inizia e termina con il bordo arrotondato.

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

Una riga di testo a capo con uno sfondo con angoli arrotondati nel punto in cui va a capo.

Frammentazione dei blocchi

La frammentazione dei blocchi si verifica se dividi i contenuti in colonne con un layout a più colonne o quando stampi e i contenuti vengono suddivisi in pagine.

Nell'esempio seguente, i contenuti sono suddivisi in colonne e ogni paragrafo ha un bordo. Con il valore iniziale di slice, le scatole vengono tagliate nella parte inferiore e superiore delle colonne.

.columns {
  column-count: 5;
}

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

Più colonne con caselle suddivise.

Con box-decoration-break: clone, quando una casella è frammentata, ogni frammento viene racchiuso nel bordo.

.columns {
  column-count: 5;
}

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

Più colonne con caselle clonate.

La stessa cosa accade se hai bordi su caselle frammentate quando stampi la pagina. Se una casella è divisa su due pagine, il bordo della casella si completa nella prima pagina e poi si apre una nuova casella nella seconda pagina.