column-rule
Trace une ligne entre les colonnes d’une mise en page multicolonne. Raccourci pour l’épaisseur, le style et la couleur de la ligne.
- Valeur initiale
medium none currentcolor- Héritée
- Non
- Animable
- oui, l’épaisseur et la couleur
- S’applique à
- conteneurs multicolonnes
- JavaScript
element.style.columnRule = "1px solid #525252"
Exemple
#.glossary {
columns: 2;
column-gap: 32px;
column-rule: 1px solid #3f3f46;
}
.glossary div {
break-inside: avoid;
margin-bottom: 10px;
}<style>
.glossary { margin: 0; }
.glossary dt { font-weight: 600; }
.glossary dd { margin: 0; color: #a1a1aa; font-size: 14px; }
</style>
<dl class="glossary">
<div><dt>Sélecteur</dt><dd>cible les éléments qui recevront le style</dd></div>
<div><dt>Propriété</dt><dd>la caractéristique que vous changez, par ex. color</dd></div>
<div><dt>Valeur</dt><dd>ce que vous attribuez à la propriété</dd></div>
<div><dt>Spécificité</dt><dd>le poids d’un sélecteur quand plusieurs règles entrent en conflit</dd></div>
</dl>Définition et utilisation
#La propriété column-rule trace une ligne verticale entre les colonnes d’un conteneur avec columns ou column-count. C’est un raccourci pour column-rule-width, column-rule-style et column-rule-color, et l’écriture ressemble à celle de border, par exemple column-rule: 1px solid #3f3f46.
La ligne ne prend pas de place. Elle se trouve au milieu de l’espacement défini par column-gap et ne l’élargit pas, donc avec une ligne épaisse et un espacement étroit, la ligne passera sous le texte. Si vous avez besoin de plus d’espace autour de la ligne, augmentez column-gap.
Tout comme pour une bordure, rien n’apparaît sans style, car le style par défaut est none. Les lignes n’apparaissent qu’entre les colonnes qui contiennent du contenu. Il n’y en a ni avant la première ni après la dernière colonne.
Syntaxe
#column-rule: <épaisseur> || <style> || <couleur>;Valeurs
#- Une ligne fine, grise et continue. Un séparateur classique et discret.
- Une ligne en pointillés de couleur ambre.
- Une ligne double. Elle nécessite au moins 3px d’épaisseur pour que les deux traits soient visibles.
- Une ligne pointillée de couleur bleu ciel.
- Pas de ligne, seul l’espacement reste entre les colonnes.
Valeurs en pratique
#1px solid #525252
.demo { column-rule: 1px solid #525252; }2px dashed #f59e0b
.demo { column-rule: 2px dashed #f59e0b; }6px double #a78bfa
.demo { column-rule: 6px double #a78bfa; }3px dotted #38bdf8
.demo { column-rule: 3px dotted #38bdf8; }none
.demo { column-rule: none; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Sur un fond sombre, une ligne à faible contraste suffit, par exemple
#3f3f46. Le séparateur doit organiser le contenu, pas attirer le regard. - La ligne n’élargit pas l’espacement. Avec une ligne plus épaisse, augmentez aussi
column-gap, pour que le texte ne touche pas le séparateur.
Entrées associées
#- columnsRépartit le contenu d’un élément en colonnes comme dans un journal. Raccourci pour column-width et column-count.
- column-gapDéfinit l’espace entre les colonnes d’un conteneur flex, grid ou multi-colonnes.
- borderRaccourci qui définit l’épaisseur, le style et la couleur d’une bordure.
- border-styleDéfinit le style de la ligne de bordure : continue, en tirets, en pointillés, et plus encore.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.