Column-rule-break et row-rule-break
Résumé des caractéristiques de la propriété column-rule-break
spanning-item | none | intersectionspanning-itemcolumn-rule-break passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de rule-break.
row-rule-break.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
column-rule-break.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Description de la propriété rule-break.
et Edge 
les reconnaissent (2025).
Cette page décrit les propriété column-rule-break, row-rule-break et rule-break. La syntaxe de ces propriétés étant la même, elles sont toutes décrites
sur cette page.
Ces propriétés s'appliquent aux conteneurs grille, aux conteneurs flex, aux conteneurs multi-colonnes et aux conteneurs maçonnerie.
Elles définissent comment se coupent les traits de séparation entre lignes et colonnes lorsqu'il se croisent. On distingue deux sortes de croisement :
Les intersections en T se rencontrent dans les conteneurs flex ou dans les conteneurs grille lorsque du contenu occupe plusieurs cellules.
rule-break applique la même valeur aux lignes et aux colonnes.
Voyez la page sur rule pour une synthèse des propriétés relatives aux filets entre lignes ou colonnes.
Valeurs pour rule-break.
La propriété rule-break semble encore mal reconnue même par les navigateurs qui reconnaissent row-rule-break et column-rule-break.
Sur les exemples, trois cellules ont été étendues sur deux lignes ou deux colonnes, créant ainsi des intersections en T.
- column-rule-break: spanning-item; row-rule-break: spanning-item; rule-break: spanning-item;
Les filets de séparation s'arrêtent aux intersections en T, pas aux intersections en croix.
Spanning-itemest la valeur initiale.ABCDEFGHIJKLrow-rule-break:spanning-item;
column-rule-break:spanning-item; - column-rule-break: none; row-rule-break: none; rule-break: none;
Les filet de décoration ne s'arrêtent pas aux intersections ni en T, ni en croix.
ABCDEFGHIJKLrow-rule-break:none;
column-rule-break:none; - column-rule-break: intersection; row-rule-break: intersection; rule-break: intersection;
Les filets de séparation s'arrêtent aussi bien aux intersections en T qu'aux intersections en croix.
ABCDEFGHIJKLrow-rule-break:intersection;
column-rule-break:intersection; - rule-break: initial; (
spanning-item) rule-break: inherit; rule-break: revert; rule-break: revertLayer; rule-break: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de rule-break.
Ces propriétés s'animent bien sûr en mode discrete (passage brutal d'une valeur à l'autre).
Exemple interactif avec la propriété rule-break.
Pour que l'effet des deux propriété row-rule-break et column-rule-break soit bien visible, nous avons fixé la valeur de rule-outset à -2px.
Compatibilité des navigateurs avec ces propriétés.
column-rule-break, qui définit comment les filets de séparation des colonnes se comportent aux intersections avec les filets de séparation des lignes.row-rule-break qui définit le comportement des filets de séparation des lignes aux intersections avec ceux des colonnes.rule-break.columns-rule-breakrow-rule-breakrule-breakNavigateurs 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
Safari
Safari sur IOS
Chrome
Firefox
Samsung Internet
Edge
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
KaiOS Browser
Opéra mini
Histoire de la propriété rule-break.
-
Module CSS - Décoration des espaces - Niveau 1.
Introduction des propriétéscolumn-rule-break,row-rule-breaketrule-breakqui définissent comment se coupent les traits de décoration dans un grille, un contenu flex ou multi-colonnes.
17 Avril 2025Document de travail.
Voir aussi, à propos des décorations d'espaces.