Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété box-decoration-break définit la façon dont les propriétés background, padding, border, border-image, box-shadow, margin et clip sont appliquées sur un élément lorsque la boîte de celui-ci est fragmentée. La fragmentation apparaît lorsqu'une boîte en ligne s'étend sur plusieurs lignes ou lorsqu'un bloc s'étend sur plus d'une colonne lorsque qu'il est dans conteneur disposé en colonne ou lorsqu'un bloc déclenche un saut de page sur un média imprimé. Chaque « morceau » de l'élément est alors appelé un fragment.

Syntaxe

/* Valeurs avec un mot-clé */
box-decoration-break: slice;
box-decoration-break: clone;

/* Valeurs globales */
box-decoration-break: initial;
box-decoration-break: inherit;
box-decoration-break: unset;

La propriété box-decoration-break est définie avec l'un des mots-clés définis ci-après.

Valeurs

clone
Le rendu de chaque fragment de boîte est obtenu indépendamment avec la bordure, le remplissage, la marge indiqués pour chacun des fragments. Les propriétés border-radius, border-image et box-shadow sont appliquées indépendamment à chaque fragment. L'arrière-plan est dessiné indépendamment pour chaque fragment (ainsi, une image d'arrière-plan avec background-repeat: no-repeat pourra être présente à plusieurs reprises).
slice
L'élément est initialement affiché comme si la boîte n'était pas fragmentée puis le rendu de cette boîte hypothétique est découpé en fragments pour chaque ligne/colonne/page. On notera que la boîte hypothétique peut être différente pour chaque fragment car elle utilise sa propre hauteur (si la rupture apparaît dans la direction de l'élément) ou sa propre largeur (si la rupture apparaît dans la direction orthogonale). C'est la valeur initiale de la propriété.

Syntaxe formelle

slice | clone

Exemples

Gestion des fragments pour les boîtes en ligne

Avec slice (valeur initiale)

CSS
.exemple {
  background: linear-gradient(to bottom right, yellow, green); 
  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; 
  padding: 0em 1em; 
  border-radius: 16px; 
  border-style: solid; 
  margin-left: 10px; 
  font: 24px sans-serif; 
  line-height: 2;
}
HTML
<span class="exemple">The<br>quick<br>orange fox</span>
Résultat live

Image équivalente

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

Avec clone

CSS
.exemple {
  background: linear-gradient(to bottom right, yellow, green);
  box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; 
  padding: 0em 1em;
  border-radius: 16px;
  border-style: solid;
  margin-left: 10px;
  font: 24px sans-serif;
  line-height: 2;

 -webkit-box-decoration-break: clone;
 -o-box-decoration-break: clone;
  box-decoration-break: clone;
}
HTML
<span class="exemple">The<br>quick<br>orange fox</span>
Résultat live

Image équivalente

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

Gestion des fragments pour les boîtes en bloc

Voici ce qu'on pourra obtenir de façon analogue avec un élément de bloc :

  1. Sans fragmentation

A screenshot of the rendering of the block element used in the examples without any fragmentation.

  1. En décomposant le bloc sur trois colonnes, normalement (slice), on aura :

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

  1. Si on applique box-decoration-break:clone, voici le résultat :

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

Spécifications

Spécification État Commentaires
CSS Fragmentation Module Level 3
La définition de 'box-decoration-break' dans cette spécification.
Candidat au statut de recommandation Définition initiale

Valeur initialeslice
Applicabilitétous les éléments
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simple
Expérimentale
Chrome Support complet 22
Préfixée Notes
Support complet 22
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes This property is only supported for inline elements.
Edge Aucun support NonFirefox Support complet 32
Support complet 32
Aucun support ? — 32
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -moz-background-inline-policy
IE Aucun support NonOpera Support complet 15
Préfixée
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 11.5 — 15
Safari Support complet 6.1
Notes
Support complet 6.1
Notes
Notes This property is only supported for inline elements.
WebView Android Support complet Oui
Notes
Support complet Oui
Notes
Notes This property is only supported for inline elements.
Chrome Android Support complet 18
Préfixée Notes
Support complet 18
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Notes This property is only supported for inline elements.
Edge Mobile ? Firefox Android Support complet 32
Support complet 32
Aucun support ? — 32
Autre nom
Autre nom Cette fonctionnalité utilise le nom non-standard : -moz-background-inline-policy
Opera Android Support complet 15
Préfixée
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Aucun support 11.5 — 14
Safari iOS Support complet 7.1
Notes
Support complet 7.1
Notes
Notes This property is only supported for inline elements.
Samsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Fonctionnalité expérimentale. Celle-ci peut être amenée à changer par la suite.
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité utilise un nom non-standard.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, teoli
Dernière mise à jour par : SphinxKnight,