Propriété CSS column-rule-style
La propriété CSS column-rule-style définit le style du séparateur entre les colonnes. Découvrez les valeurs illustrées par des exemples.
La propriété CSS column-rule-style définit le style de la ligne (séparateur) tracée entre les colonnes d'une mise en page multi-colonnes. Le séparateur de colonnes fonctionne exactement comme une bordure : il se situe dans le column-gap et sépare visuellement les colonnes adjacentes, et il accepte le même ensemble de styles de ligne qu'une bordure.
Cette propriété fait partie des propriétés CSS3.
column-rule-style est l'une des trois sous-propriétés qui composent le raccourci column-rule, aux côtés de column-rule-width et column-rule-color. Seule, elle contrôle uniquement la forme de la ligne — vous combinez généralement les trois pour obtenir un résultat visible.
Quand l'utiliser
Utilisez column-rule-style chaque fois que vous répartissez du texte en plusieurs colonnes et souhaitez un séparateur visible — comme dans une mise en page de journal ou de magazine. Comme le séparateur se trouve à l'intérieur de l'espace entre colonnes, il n'occupe aucun espace supplémentaire et n'écarte jamais le contenu, ce qui en fait un moyen propre de séparer les colonnes sans modifier la largeur de la mise en page.
Pour utiliser cette propriété, vous devez d'abord transformer un élément en conteneur multi-colonnes avec les propriétés columns ou column-count — le séparateur n'a rien à tracer s'il n'y a qu'une seule colonne.
Points à surveiller
- Le séparateur est invisible par défaut car le style initial est
none. Même après avoir défini un style, un séparateur ne s'affichera pas si column-rule-width n'est pas supérieur à0(la largeur par défaut estmedium, généralement visible). - Les styles 3D —
groove,ridge,insetetoutset— dépendent de la couleur du séparateur. Avec une couleur très claire outransparent, l'effet 3D peut être difficile à voir ; définissez column-rule-color explicitement. hiddenetnonene dessinent rien tous les deux, maishiddenréserve quand même une largeur dans l'espace, tandis quenonese réduit à zéro — la différence n'a d'importance que lorsqu'un autre style de séparateur le rencontre.
La propriété column-rule-style accepte les valeurs suivantes :
- none
- hidden
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
| Valeur initiale | none |
|---|---|
| S'applique à | Éléments multi-colonnes. |
| Hérité | Non. |
| Animatable | Non. |
| Version | CSS3 |
| Syntaxe DOM | object.style.columnRuleStyle = "dashed" ; |
Syntaxe
Syntaxe de la propriété CSS column-rule-style
column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;Exemple de la propriété column-rule-style :
Exemple de la propriété CSS column-rule-style avec la valeur dotted
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: dotted;
}
</style>
</head>
<body>
<h2>Column-rule-style property example</h2>
<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
Dans l'exemple suivant, le séparateur entre les colonnes est double. Ici, le séparateur reçoit une couleur via la propriété column-rule-color et une épaisseur explicite avec column-rule-width, ce qui rend la double ligne clairement visible.
Exemple de la propriété column-rule-style avec la valeur « double » :
Exemple de la propriété CSS column-rule-style avec la valeur double
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule-style: double;
column-rule-color: #1c87c9;
column-rule-width: 5px;
text-align: justify;
}
</style>
</head>
<body>
<h1>Column-rule-style property example</h1>
<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 |
|---|---|
| none | Aucun séparateur n'est défini. Il s'agit de la valeur par défaut. |
| hidden | Le séparateur est masqué. |
| dotted | Le séparateur est en pointillés. |
| dashed | Le séparateur est en tirets. |
| solid | Le séparateur est continu. |
| double | Le séparateur est double. |
| groove | Le séparateur est une rainure 3D. Les valeurs de largeur et de couleur définissent l'effet. |
| ridge | Le séparateur est une arête 3D. Les valeurs de largeur et de couleur définissent l'effet. |
| inset | Le séparateur est en retrait 3D. Les valeurs de largeur et de couleur définissent l'effet. |
| outset | Le séparateur est en relief 3D. Les valeurs de largeur et de couleur définissent l'effet. |
| initial | Définit la propriété à sa valeur par défaut. |
| inherit | Hérite la propriété de son élément parent. |
Propriétés associées
- column-rule — raccourci qui définit la largeur, le style et la couleur en une seule fois.
- column-rule-width — épaisseur du séparateur.
- column-rule-color — couleur du séparateur.
- column-gap — l'espace dans lequel le séparateur est tracé.
- column-count et columns — créent la mise en page multi-colonnes.