De eigenschap doosdecoratie-pauze in Chrome 130

Rachel Andrew

Gepubliceerd: 11 oktober 2024

In Chrome 130 is de CSS-eigenschap ` box-decoration-break met de waarde ` clone beschikbaar, met ondersteuning voor inline- en blokfragmentatie. In dit artikel wordt uitgelegd waarom en hoe je deze eigenschap kunt gebruiken.

Inline fragmentatie

Inline fragmentatie treedt op wanneer een inline element, bijvoorbeeld een tekstreeks, over meerdere regels wordt verdeeld. Inline elementen hebben een kader, waar je normaal gesproken geen rekening mee hoeft te houden, tenzij je een achtergrond of rand aan het element wilt toevoegen. In het volgende voorbeeld wordt een achtergrond met een border-radius toegevoegd aan een span. De rand buigt alleen aan het begin en einde van de tekstreeks.

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

Een tekstregel die is afgebroken, waarbij de achtergrond op de plek waar de tekst afbreekt, is weggesneden.

De oorspronkelijke waarde van box-decoration-break is slice , wat dit gesneden effect op de vakjes geeft. De nieuw ondersteunde waarde box-decoration-break: clone betekent echter dat elke regel begint en eindigt met een afgeronde rand.

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

Een tekstregel die om de rand wordt afgebroken, met een achtergrond waarvan de hoeken afgerond zijn.

Blokfragmentatie

Blokfragmentatie treedt op als u inhoud in kolommen verdeelt met een lay-out met meerdere kolommen, of wanneer u afdrukt en de inhoud over meerdere pagina's wordt verdeeld.

In het volgende voorbeeld is de inhoud opgedeeld in kolommen en heeft elke alinea een rand. Met de initiële waarde van slice worden de kaders aan de boven- en onderkant van de kolommen afgesneden.

.columns {
  column-count: 5;
}

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

Meerdere kolommen met uitgesneden vakjes.

Met box-decoration-break: clone , wanneer een doos wordt gefragmenteerd, elk fragment omwikkeld met de rand.

.columns {
  column-count: 5;
}

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

Meerdere kolommen met gekloonde vakjes.

Hetzelfde gebeurt als je randen hebt rond vakken die gefragmenteerd zijn tijdens het afdrukken van de pagina. Als een vak over twee pagina's is verdeeld, wordt de rand van het vak op de eerste pagina voltooid en begint er een nieuw vak op de tweede pagina.