Publié le 11 octobre 2024
Dans Chrome 130, la propriété CSS box-decoration-break avec la valeur clone est disponible, avec la prise en charge de la fragmentation en ligne et par blocs. Cet article explique pourquoi et comment l'utiliser.
Fragmentation intégrée
La fragmentation en ligne se produit lorsqu'un élément en ligne, par exemple une chaîne de texte, est réparti sur plusieurs lignes. Les éléments en ligne ont une boîte, à laquelle vous n'avez généralement pas besoin de penser, sauf si vous essayez d'ajouter un arrière-plan ou une bordure à l'élément. Dans l'exemple suivant, un arrière-plan avec un border-radius est ajouté à une étendue. La bordure n'est incurvée qu'au début et à la fin de la chaîne.
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
}
La valeur initiale de box-decoration-break est slice, ce qui donne cet effet de tranche sur les boîtes. Cependant, la nouvelle prise en charge de box-decoration-break: clone signifie que chaque ligne commence et se termine par une bordure arrondie.
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
box-decoration-break: clone;
}
Fragmentation des blocs
La fragmentation de blocs se produit si vous divisez le contenu en colonnes avec une mise en page à plusieurs colonnes, ou lorsque vous imprimez et que le contenu est divisé en pages.
Dans l'exemple suivant, le contenu est divisé en colonnes et chaque paragraphe comporte une bordure. Avec la valeur initiale de slice, les boîtes sont découpées en haut et en bas des colonnes.
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
}
Avec box-decoration-break: clone, lorsqu'une boîte est fragmentée, chaque fragment est entouré d'une bordure.
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
box-decoration-break: clone;
}
Il en va de même si les bordures des boîtes sont fragmentées lors de l'impression de la page. Si une boîte est répartie sur deux pages, la bordure de la boîte se termine sur la première page, puis une nouvelle boîte s'ouvre sur la deuxième page.