Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

box-decoration-break - Propriété CSS

box-decoration-break

Résumé des caractéristiques de la propriété box-decoration-break

Description rapide
Gestion de la présentation des éléments fragmentés sur plusieurs lignes.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
slice | clone
Pourcentages
Ne s'appliquent pas.
Valeur initiale
slice
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété box-decoration-break passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Fragmentation
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: CR (document proposé pour la recommandation)

Description de la propriété box-decoration-break.

box-decoration-break définit comment sont traitées les propriétés de décoration lorsque des éléments sont fragmentés sur plusieurs colonnes ou plusieurs lignes. Lors de l'impression la fragmentation peut être d'une page sur l'autre.

Les propriétés de décoration incluent la bordure, les marges, extérieures et intérieures, le fond et la découpe éventuelle (clip).

Un petit exemple sera plus parlant : ce texte comporte
une bordure rouge
et est fragmenté sur plusieurs lignes
.

Valeurs pour box-decoration-break.

box-decoration-break:
Schéma syntaxique de la propriété box-decoration-breakSyntaxe de box-decoration-break, propriété CSS. slice slice clone clone
;
  • box-decoration-break: slice;
    box-decoration-break:slice

    Valeur par défaut. Les différents fragments sont considérés comme un élément unique. La marge du haut par exemple n'est appliquée qu'au premier fragment ; la marge du bas seulement au dernier fragment. Les bordures englobent les différents fragments comme s'il s'agissait d'un élément unique.

  • box-decoration-break: clone;
    box-decoration-break:clone

    Chacun des fragments est traité comme un élément à part entière. Les marges sont appliquées à chacun des fragments et les bordures englobent séparément chacun des fragments.

  • box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: revert; box-decoration-break: revert-layer; box-decoration-break: unset;

    La valeur initiale est : slice.

Animation de la propriété box-decoration-break.

La norme du W3C ne prévoit pas que cette propriété puisse être animée. Néanmoins certains navigateur comme Firefox sont capable d'animer box-decoration-break en passant d'une valeur à l'autre sans transition progressive (ce qui est normal puisqu'il ne s'agit pas de valeurs numériques).

Cet élément est sur deux colonnes et contient un bloc avec une bordure.
Si votre navigateur accepte d'animer box-decoration-break, vous devriez voir l'effet de l'animation au niveau de la bordure et des angles arrondis.

Exemple interactif.


box-decoration-break :

-webkit-box-decoration-break :

Exemple de rendu de la propriété
sur un élément du type inline
fragmenté sur plusieurs lignes
(par des balises br/).
Exemple de rendu de la propriété box-decoration-break sur un élément du type block fragmenté sur deux colonnes. L'effet est visible sur la bordure et sur les arrondis dans les angles.
Lorsqu'une image de fond est appliquée à l'élément, sa répétition et/ou son positionnement sont également influencés par la valeur de la propriété box-decoration-break.
Cela se voit nettement sur cet exemple : la deuxième colonne affiche soit la suite de l'image (avec la valeur slice), soit l'image reprise depuis le début (avec clone).

Prise en charge de la propriété box-decoration-break par les navigateurs.

Cette propriété est encore mal gérée par les navigateurs. N'hésitez pas à utiliser les syntaxe préfixées par -moz- et -webkit- pour améliorer la compatibilité.

1
box-decoration-break
Estimation de la prise en charge en pourcentage du parc actuel.
3%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que box-decoration-break.

Les spécifications CSS éditées par le W3C sont organisées en modules. box-decoration-break fait partie du Module CSS - Fragmentation (CSS Fragmentation Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Interdit ou impose des sauts (page, colonne...) après l'élément.
Interdit ou impose des sauts (page, colonne...) avant l'élément.
Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
Gestion des coupures en bas de page ou de colonne.
Gestion des ruptures en haut de page ou de colonne.