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
Utilisable sur
HTML
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 candidat à la recommandation)

Syntaxe de box-decoration-break (schéma).

Box-decoration-break - Syntax DiagramSyntax diagram of the box-decoration-break CSS property. See stylescss.free.fr for details. slice slice clone clonebox-decoration-break:;box-decoration-break:;
Schéma syntaxique de la propriété box-decoration-break.
Cliquez sur le schéma pour plus de détails sur les valeurs

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: 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:slice
  • 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:clone
  • box-decoration-break: initial; (slice) box-decoration-break: inherit; box-decoration-break: revert; box-decoration-break: revertLayer; box-decoration-break: unset;

    Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, unset.

Possibilité d'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.

La propriété box-decoration-break et Javascript.

Avec Javascript, modifier la valeur de box-decoration-break.

En Javascript, voici comment modifier la valeur de box-decoration-break. On voit que Javascript propose une syntaxe avec la notation kebab-case typique de CSS, et une autre syntaxe en camel-case, plus courante en Javascript.

Javascript
let el = document.getElementById('id'); el.style['box-decoration-break'] = 'slice'; // ou let el = document.getElementById('id'); el.style.boxDecorationBreak = 'slice';

Avec Javascript, lire la valeur de box-decoration-break.

Ce code fonctionne si la propriété doit avoir été affectée directement à l'élément lui-même avec son attribut style, et non pas en passant par un sélecteur de CSS.

Javascript
let el = document.getElementById('id'); let value = el.style['box-decoration-break']; // ou let el = document.getElementById('id'); let value = el.style.boxDecorationBreak;

Avec Javascript, lire la valeur calculée de box-decoration-break.

La valeur calculée est celle qui résulte de la cascade des héritages. Si aucune valeur n'est définie ni héritée, la valeur calculée est la valeur initiale de la propriété {soit slice dans le cas de box-decoration-break).

Javascript
let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('box-decoration-break');

Avec JQuery, modifier la valeur de box-decoration-break.

JQuery permet les mêmes opérations que Javascript avec une syntaxe plus courte.

JQuery

$('#id').css('box-decoration-break', 'slice');
// ou
$('#id').css('boxDecorationBreak', 'slice');

Avec JQuery, lire la valeur calculée de box-decoration-break.

JQuery
let value = $('#id').css('box-decoration-break');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété box-decoration-break et affichent ensuite soit la valeur telle qu'elle a été appliquée, soit la valeur calculée. Dans le cas de box-decoration-break cela ne fait pas de différence car la propriété n'accepte que des valeurs prédéfinies.

Simulateur avec la propriété box-decoration-break.

Ce simulator illustre le fonctionnement de la propriété box-decoration-break dans trois cas de figure différents

box-decoration-break :
Exemple de rendu de la propriété box-decoration-break
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).

Simulateur avec la propriété box-decoration-break.

Cette propriété est maintenant assez bien reconnue par tous les navigateurs. Vous pouvez cependant encore doubler les syntaxes avec le préfixe -webkit- pour améliorer la compatibilité.

Colonne 1
Traitement correct par les navigateurs de la rupture des décorations qui intervient lorsque qu'un élément est coupé par un saut de page, de colonne ou de région. Et donc de la propriété box-decoration-break.

Remarques :

(1) Support partiel : ne fonctionne pas à la rupture de colonnes ou de pages.

1
Propriété
box-decoration-break
Estimation de la prise en charge globale.
71%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Firefox pour Androïd

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Samsung Internet

Safari

Safari sur IOS

KaiOS Browser

Opéra mini

Évolution de la propriété box-decoration-break.

  • Module CSS - Fragmentation - Niveau 3

    Introduction de ce module spécifique aux fragmentation.
    Introduction de la propriété box-decoration-break.
    WD
    28 Février 2012
    Document de travail.
    CR
    14 Janvier 2016
    Candidat à la recommandation.
    PR
    REC
  • Module CSS - Fragmentation - Niveau 4

    Pas de changement concernant la propriété box-decoration-break.
    WD
    18 Décembre 2018
    Document de travail.
    CR
    PR
    REC

Voir aussi, au sujet des fragmentations.

Le module CSS Fragmentation Module produit par le W3C définit ce qui concerne la fragmentation des éléments, c'est à dire les propriétés suivantes :

Propriétés :

break-after
Interdit ou impose des sauts (de page, de colonne...) après l'élément.
break-before
Interdit ou impose des sauts (de page, de colonne...) avant l'élément.
break-inside
Définit si les sauts de colonne, de page, etc. sont permis dans l'élément.
orphans
Définit le nombre de lignes qui doivent rester en base de page ou de colonne, dans chaque paragraphe.
widows
Définit le nombre de lignes qui doivent rester en haut des pages ou des colonnes.