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 para fragmentação inline e de bloco. Esta postagem explica por que e como usá-lo.

Fragmentação inline

A fragmentação inline acontece quando um elemento inline, por exemplo, uma string de texto, é dividido em várias linhas. Os elementos inline têm uma caixa, que geralmente não é necessário considerar, a menos que você tente adicionar um plano de fundo ou uma borda ao elemento. No exemplo a seguir, um plano de fundo com um border-radius é adicionado a um intervalo. A borda só faz uma 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 quebrada com um plano de fundo cortado onde ela quebra.

O valor inicial de box-decoration-break é slice, o que dá esse efeito de corte nas caixas. No entanto, o box-decoration-break: clone recém-compatível 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 encapsulada com um plano de fundo com cantos arredondados onde ela é encapsulada.

Fragmentação de blocos

A fragmentação de blocos acontece quando você divide 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 a seguir, 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 baixo e de cima das colunas.

.columns {
  column-count: 5;
}

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

Várias colunas com caixas segmentadas.

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 da caixa será concluída na primeira página e abrirá uma nova caixa na segunda página.