Propriété CSS column-rule
La propriété raccourcie column-rule définit le style, la largeur et la couleur du séparateur entre les colonnes. Exemples inclus.
La propriété raccourcie column-rule définit le style, la largeur et la couleur du trait dessiné entre les colonnes d'une mise en page multi-colonnes. Elle fonctionne comme le raccourci border, mais au lieu de tracer un cadre autour d'un élément, elle dessine un seul trait vertical dans chaque espace de colonne.
Le trait est une ligne purement décorative : il est peint à l'intérieur de l'espace et n'occupe aucun espace propre. Élargir le trait n'écarte pas les colonnes — seul column-gap modifie l'espacement. C'est pourquoi un trait épais peut visuellement chevaucher le texte de chaque côté si l'espace est trop petit.
column-rule est un raccourci pour ces trois propriétés individuelles :
- column-rule-width — l'épaisseur du trait.
- column-rule-style — le style du trait (
solid,dotted,dashed, etc.). - column-rule-color — la couleur du trait.
Comme tout raccourci, toute propriété individuelle omise est réinitialisée à sa valeur initiale. Ainsi, column-rule: 5px solid; définit explicitement la largeur et le style, tandis que la couleur revient à currentColor (la couleur de texte de l'élément) et la largeur à medium si elle est omise.
Quand utiliser column-rule
Utilisez column-rule chaque fois que vous répartissez du texte en flux sur plusieurs colonnes et que vous souhaitez un séparateur visible — mises en page d'articles style journal, listes de liens, groupes de liens de pied de page ou glossaire. Un trait discret 1px solid #ddd aide l'œil à repérer où une colonne se termine et où la suivante commence, sans ajouter de balisage supplémentaire.
Le trait n'apparaît que lorsque l'élément établit réellement une mise en page multi-colonnes — c'est-à-dire lorsque column-count ou le raccourci columns crée plus d'une colonne. Sur un élément à colonne unique, il n'y a pas d'espace, donc rien n'est dessiné.
column-rule est l'une des propriétés CSS3.
| Valeur initiale | medium (largeur), none (style), currentColor (couleur) |
|---|---|
| S'applique à | Les conteneurs de blocs qui établissent une mise en page multi-colonnes. S'applique également à ::first-letter. |
| Hérité | Non. |
| Animatable | Oui. La couleur et la largeur de column-rule sont animables. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columnRule = "5px outset #ccc"; |
Syntaxe
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;L'ordre des trois valeurs est flexible — le navigateur les distingue par type, donc column-rule: dotted 5px #ccc est tout aussi valide que column-rule: 5px dotted #ccc. Comme avec border, une valeur none (ou l'omission du style) signifie qu'aucun trait n'est dessiné, car column-rule-style prend par défaut la valeur none.
Exemple de la propriété column-rule :
Exemple avec les valeurs de largeur, style et couleur
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: 5px dotted #ccc;
}
</style>
</head>
<body>
<h1>Column-rule example</h1>
<p>Here the column-rule is set to 5px dotted gray.</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Résultat
Si une seule valeur est fournie, elle est interprétée comme le column-rule-style (les deux autres propriétés individuelles conservent leurs valeurs initiales).
Exemple de la propriété column-rule avec une seule valeur :
Exemple avec une valeur unique
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: dashed;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to only "dashed".</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Exemple de la propriété column-rule avec largeur, style et couleur spécifiés :
Exemple avec toutes les valeurs spécifiées
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: 30px;
column-rule: 10px groove #ccc;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to 10px groove gray.</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| column-rule-width | Définit la largeur du trait entre les colonnes. La valeur par défaut est "medium". |
| column-rule-style | Définit le style du trait entre les colonnes. La valeur par défaut est "none". |
| column-rule-color | Définit la couleur du trait. La valeur par défaut est la couleur actuelle de l'élément. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Points à surveiller
- Le trait nécessite un contexte multi-colonnes. Définissez column-count (ou le raccourci columns) sur le même élément, sinon le trait n'apparaît jamais.
- Un style manquant signifie aucun trait. Étant donné que
column-rule-styleprend par défaut la valeurnone,column-rule: 5px #ccc;ne dessine rien. Incluez toujours un mot-clé de style tel quesolidoudotted. - Le trait ne modifie pas la mise en page. Sa largeur est prélevée sur l'espace existant, sans s'y ajouter. Si un trait épais chevauche le texte, augmentez column-gap — le trait se centre dans cet espace.
- Aucun trait avant la première colonne ni après la dernière. Un trait est dessiné uniquement entre les colonnes adjacentes, jamais sur les bords extérieurs.
Compatibilité des navigateurs
column-rule est largement pris en charge dans tous les navigateurs modernes (Chrome, Edge, Firefox, Safari et Opera). Les anciennes versions WebKit et Gecko nécessitaient les préfixes -webkit- et -moz-, mais column-rule sans préfixe est aujourd'hui sûr à utiliser.