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 il supporto della frammentazione in linea e a blocchi. Questo post spiega perché e come per utilizzarlo.

Frammentazione in linea

La frammentazione in linea è ciò che accade quando un elemento in linea, ad esempio un stringa di testo, con interruzioni su più righe. Gli elementi in linea hanno una casella, che in genere non devi considerare, a meno che tu non provi ad aggiungere un sfondo o un bordo all'elemento. Nel seguente esempio uno sfondo con border-radius viene aggiunto a un intervallo. 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 suddiviso in sezioni dove si verifica il capo.

Il valore iniziale di box-decoration-break è slice e restituisce questo segmento effetto sulle scatole. L'elemento box-decoration-break: clone appena supportato Tuttavia, 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 linea di testo a capo su uno sfondo con angoli arrotondati.

Frammentazione dei blocchi

La frammentazione dei blocchi si verifica se suddividi i contenuti in colonne con un layout a più colonne o quando li 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 suddivise in base alla in basso e in alto nelle colonne.

.columns {
  column-count: 5;
}

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

Più colonne con riquadri suddivisi.

Con box-decoration-break: clone, quando una casella è frammentata, ogni frammento viene visualizzato con il bordo.

.columns {
  column-count: 5;
}

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

Più colonne con caselle clonate.

Lo stesso accade se ci sono bordi su riquadri che sono frammentati quando la stampa della pagina. Se un riquadro è diviso su due pagine, il bordo della casella verrà completato nella prima pagina, quindi si aprirà una nuova casella nella seconda.