column-rule

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).

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 :
Animablepour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

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;

Valeurs

Cette propriété accepte une, deux ou trois valeurs, dans n'importe quel ordre :

<'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;
 
  -moz-column-rule: inset 2px gold;
  -moz-column-count: 3;

  -webkit-column-rule: inset 2px gold;
  -webkit-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.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple (Oui)-webkit
50.0
3.5 (1.9.1)-moz 10 11.10 3.0 (522)-webkit
Fonctionnalité Android Webview Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? (Oui)-webkit
50.0
(Oui) ? ? ?

Étiquettes et contributeurs liés au document

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