column-rule - Propriété CSS
column-rule
Résumé des caractéristiques de la propriété column-rule
Description rapide
Définit tous les paramètres du trait de séparation entre les colonnes.
Statut
Standard
Type de valeur
Voir les propriétés individuelles.
Pourcentages
Ne s'appliquent pas.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Non
Type d'animation
Voir les propriétés individuelles
Module W3C
Module CSS - Mise en page multi-colonnes
Références (W3C)
Statut du document:: CR (document proposé pour la recommandation)
Description de la propriété column-rule
.
column-rule
définit le trait de séparation entre les colonnes, dans le cas d'une mise en page sur plusieurs colonnes.
C'est une propriété résumée qui regroupe plusieurs informations :
column-rule-width
: épaisseur de la ligne de séparation.column-rule-style
: style de la ligne de séparation (paramètre obligatoire).column-rule-color
: couleur de la ligne de séparation.
Exemples.
Dans ce premier exemple, nous avons défini seulement le style de trait (le seul paramètre obligatoire).
L'épaisseur et la couleur ont été fixées à leur valeur initiale, à savoir
medium
pour l'épaisseur du trait
et currentColor
pour la couleur.
En effet, comme toutes les propriétés résumées, column-rule
initialise toutes les valeurs concernées, en fixant
à leur valeur initiale les paramètres qui ne sont pas spécifiés.
Ce deuxième exemple est un cas particulier : la largeur du trait de séparation a été fixée à une valeur plus grande
que la largeur de la gouttière (voir
On voit d'autre part que le trait de séparation empiète sur le texte des colonnes, mais tout en restant en arrière de celui-ci. Il n'y a donc pas de risque de masquage du contenu des colonnes par le trait de séparation.
column-gap
).
L'esthétique du résultat est probablement critiquable, mais cet exemple montre bien que la largeur du trait de séparation
ne s'ajoute pas à la largeur de la gouttière.
On voit d'autre part que le trait de séparation empiète sur le texte des colonnes, mais tout en restant en arrière de celui-ci. Il n'y a donc pas de risque de masquage du contenu des colonnes par le trait de séparation.
Animation de column-rule
.
Reportez-vous aux pages sur les propriétés individuelles pour des exemples d'animations.
Prise en charge par les navigateurs (compatibilité).
Les mises en page sur plusieurs colonnes sont relativement bien prises en charge par les navigateurs récents, même s'il subsiste
des non conformités.
La propriété column-rule
est quant à elle bien reconnue.
Colonne 1
Support général par les navigateurs des mises en page multi-colonnes.
Colonne 2
Compatibilité des navigateurs avec la propriété CSS
column-rule
.
1
Columns
2
column-rule
Estimation de la prise en charge en pourcentage du parc actuel.
21%
95%
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir le site Caniuse.com pour plus d'informations de compatibilité.
Voir aussi, dans le même module de standardisation que column-rule
.
Les spécifications CSS éditées par le W3C sont organisées en modules. column-rule
fait partie du Module CSS - Mise en page multi-colonnes (CSS Multi-column Layout Module). Les définitions suivantes sont également décrites dans ce même module.
Propriétés.
Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
Gère la répartition du contenu entre les colonnes.
Définit la couleur des lignes de séparation de colonnes.
Choisit le type de trait pour la séparation des colonnes.
Définit l'épaisseur du trait de séparation entre les colonnes.
Gère le chevauchement du contenu sur plusieurs colonnes.
Définit la largeur des colonnes.
Définit les caractéristiques d'une mise en page sur plusieurs colonnes.