Lorsqu'on utilise une disposition sur plusieurs colonnes, la propriété raccourcie column-rule
permet de définir l'affichage d'une ligne droite (aussi appelée « règle ») entre chaque colonne.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
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ésthin
,medium
outhick
. Pour plus de détails, voirborder-width
. <'column-rule-style'>
- Voir
border-style
pour les différentes valeurs possibles. <'column-rule-color'>
- Une valeur de couleur (type
<color>
).
Syntaxe formelle
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 initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | éléments sur plusieurs colonnes |
Héritée | non |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Compatibilité des navigateurs
BCD tables only load in the browser