box-decoration-break - Propriété CSS
Résumé des caractéristiques de la propriété box-decoration-break
slice
| clone
slice
box-decoration-break
passe d'une valeur à l'autre sans transition.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:
;
- 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;
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).
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.
sur un élément du type
inline
fragmenté sur plusieurs lignes (par des balises br/).
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.
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é.
box-decoration-break
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.