A propriedade box-decoration-break no Chrome 130

Rachel Andrew

Publicado em 11 de outubro de 2024

No Chrome 130, a propriedade CSS box-decoration-break com um valor de clone está disponível, com suporte à fragmentação inline e de blocos. Esta postagem explica por que e como usá-lo.

Fragmentação inline

A fragmentação in-line é o que acontece quando um elemento inline, por exemplo, uma string de texto, é quebrado em várias linhas. Os elementos inline têm uma caixa, que normalmente não precisa ser considerada, a menos que você tente adicionar um plano de fundo ou uma borda ao elemento. No exemplo abaixo, um plano de fundo com um border-radius é adicionado a um span. A borda só se curva no início e no fim da string.

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

Uma linha de texto unida com um plano de fundo cortado onde ela é unida.

O valor inicial de box-decoration-break é slice, o que gera esse efeito cortado nas caixas. No entanto, o novo suporte a box-decoration-break: clone significa que cada linha começa e termina com a borda arredondada.

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

Uma linha de texto quebrada em um plano de fundo com cantos arredondados.

Fragmentação de blocos

A fragmentação de bloco acontece se você dividir o conteúdo em colunas com layout de várias colunas ou quando você imprime e o conteúdo é dividido em páginas.

No exemplo abaixo, o conteúdo é dividido em colunas, e cada parágrafo tem uma borda. Com o valor inicial de slice, as caixas são cortadas na parte de cima e de baixo das colunas.

.columns {
  column-count: 5;
}

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

Várias colunas com caixas cortadas.

Com box-decoration-break: clone, quando uma caixa é fragmentada, cada fragmento é encapsulado com a borda.

.columns {
  column-count: 5;
}

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

Várias colunas com caixas clonadas.

O mesmo acontece se você tiver bordas em caixas que são fragmentadas ao imprimir a página. Se uma caixa for dividida em duas páginas, a borda dela será concluída na primeira página e abrirá uma nova caixa na segunda página.