Propiedad de romper la decoración en Chrome 130

Rachel Andrew

Fecha de publicación: 11 de octubre de 2024

En Chrome 130, la box-decoration-break propiedad CSS con un valor de clone está disponible, con compatibilidad para la fragmentación intercalada y de bloques. En esta publicación, se explica por qué y cómo usarla.

Fragmentación intercalada

La fragmentación intercalada es lo que sucede cuando un elemento intercalado, por ejemplo, una cadena de texto, se divide en varias líneas. Los elementos intercalados tienen un cuadro, que, por lo general, no necesitas tener en cuenta, a menos que intentes agregar un fondo o un borde al elemento. En el siguiente ejemplo, se agrega un fondo con un border-radius a un span. El borde solo se curva al principio y al final de la cadena.

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

Una línea de texto ajustada con un fondo cortado donde se ajusta.

El valor inicial de box-decoration-break es slice, lo que le da este efecto de corte a los cuadros. Sin embargo, el box-decoration-break: clone recientemente compatible significa que cada línea comienza y termina con el borde redondeado.

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

Una línea de texto ajustada con un fondo con esquinas redondeadas donde se ajusta.

Fragmentación de bloques

La fragmentación de bloques ocurre si divides el contenido en columnas con un diseño de varias columnas o cuando imprimes y el contenido se divide en páginas.

En el siguiente ejemplo, el contenido se divide en columnas y cada párrafo tiene un borde. Con el valor inicial de slice, los cuadros se cortan en la parte inferior y superior de las columnas.

.columns {
  column-count: 5;
}

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

Varias columnas con cajas cortadas.

Con box-decoration-break: clone, cuando se fragmenta un cuadro, cada fragmento se ajusta con el borde.

.columns {
  column-count: 5;
}

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

Varias columnas con casillas clonadas.

Sucede lo mismo si tienes bordes en cuadros que se fragmentan cuando imprimes la página. Si un cuadro se divide en dos páginas, el borde del cuadro se completará en la primera página y, luego, se abrirá un cuadro nuevo en la segunda página.