Lorsqu'on utilise une disposition sur plusieurs colonnes, la propriété column-rule permet de définir l'affichage d'une ligne droite (aussi appelée « règle ») entre chaque colonne.

Cette propriété est une propriété raccourcie qui permet de définir column-rule-width, column-rule-style et column-rule-color (plutôt que d'avoir à les définir une par une, ce qui est plus laborieux).

Note : Cette propriété étant une propriété raccourcie, elle surcharge toutes les déclarations avec les propriétés individuelles écrites avant au sein d'une même règle.

Syntaxe

/* Syntaxe avec des mots-clés */
column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;

/* Valeurs globales */
column-rule: inherit;
column-rule: initial;
column-rule: unset;

Cette propriété peut être définie avec une, deux ou trois valeurs telles que définies ci-après, dans n'importe quel ordre.

Valeurs

<'column-rule-width'>
Une valeur de longueur (type <length>) ou l'un des mots-clés thin, medium ou thick. Pour plus de détails, voir border-width.
<'column-rule-style'>
Voir border-style pour les différentes valeurs possibles.
<'column-rule-color'>
Une valeur de couleur (type <color>).

Syntaxe formelle

<'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

Exemples

HTML

<div id="col_rul"> 
  <p> column one </p>
  <p> column two </p>
  <p> column three </p>
</div>

CSS

#col_rul{ 
  padding: 0.3em;
  background: gold; 
  border: groove 2px gold;
  column-rule: inset 2px gold;
  column-count: 3;
}

Résultat

Spécifications

Spécification État Commentaires
CSS Multi-column Layout Module
La définition de 'column-rule' dans cette spécification.
Version de travail Définition initiale.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitééléments sur plusieurs colonnes
Héritéenon
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniqueselon la grammaire

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 50
Support complet 50
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Support complet 12
Préfixée
Support complet 12
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Firefox Support complet 52
Support complet 52
Support complet 3.5
Préfixée Notes
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Notes Before Firefox 3, the default value for the normal keyword was 0 and not 1em.
IE Support complet 10Opera Support complet 11.1
Support complet 11.1
Support complet 15
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Safari Support complet 3
Préfixée
Support complet 3
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
WebView Android Support complet OuiChrome Android Support complet 50
Support complet 50
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Edge Mobile ? Firefox Android Support complet 52
Support complet 52
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
Opera Android ? Safari iOS ? Samsung Internet Android Support complet 5.0
Support complet 5.0
Support complet Oui
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
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.

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB
Dernière mise à jour par : SphinxKnight,