Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

Column-rule-width - Propriété CSS

column-rule-width

Résumé des caractéristiques de la propriété column-rule-width

Description rapide
Définit l'épaisseur du trait de séparation entre les colonnes.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
medium | thick | thin
Pourcentages
Ne s'appliquent pas.
Valeur initiale
medium
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété column-rule-width passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Mise en page multi-colonnes
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de column-rule-width.

column-rule-width - Syntax DiagramSyntax diagram of the column-rule-width CSS property. See stylescss.free.fr for details. thin thin medium medium thick thick length lengthcolumn-rule-width:;column-rule-width:;
Schéma syntaxique de la propriété column-rule-width
Les liens du schéma donnent accès à plus de détails

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

Description de la propriété column-rule-width.

column-rule-width définit l'épaisseur de la ligne de séparation entre les colonnes. Voyez aussi la column-rule-color column-rule.

Notez que l'épaisseur de la ligne de séparation est prise sur la largeur du gap : elle ne s'ajoute pas. La présence d'une ligne de séparation ne change donc pas la largeur des colonnes ni leur espacement.

Si l'épaisseur de la ligne de séparation est supérieure à la largeur du gap, la ligne empiète sur le contenu, mais sans le masquer, le contenu étant au dessus.

Pour des explications détaillées sur les possibilités du multicolonnage en CSS, reportez-vous à la propriété columns.

Syntaxes pour column-rule-width.

  • column-rule-width: medium;

    Valeur par défaut. Ligne d'épaisseur intermédiaire, de environ 4 pixels (celle valeur peut être différente d'un navigateur à l'autre).

  • column-rule-width: thin;

    Ligne de séparation fine (de l'ordre de 1 pixel).

  • column-rule-width: thick;

    Ligne de séparation épaisse (de l'ordre de 6 pixels).

  • column-rule-width: 3px;

    Un nombre positif ou égal à zéro, suivi d'une unité de dimension (voir les unités CSS de dimension).
    Les pourcentages ne sont pas acceptés.

Valeurs globales
(communes à toutes les propriétés)

column-rule-width: initial (medium) column-rule-width: inherit column-rule-width: revert column-rule-width: revertLayer column-rule-width: unset

Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Simulateur.

column-rule-width :
En typographie, une colonne est un ou plusieurs blocs verticaux de contenu positionnés sur une page, séparés par des gouttières et/ou des règles (lignes de séparation). Les colonnes sont le plus souvent utilisées pour diviser de longs corps de texte qui ne peuvent pas tenir dans un seul bloc de texte sur une page.

Prise en charge par les navigateurs (compatibilité).

Les mises en page multi-colonnes sont partiellement prises en charge par les navigateurs récents (voir sur le tableau ci-dessous). Néanmoins, ces incompatibilités sont rarement gênantes, et la propriété column-rule-width est bien reconnue.

Colonne 1
Traitement général par les navigateurs des mises en page multi-colonnes.
Colonne 2
Compatibilité des navigateurs avec la syntaxe de la propriété CSS column-rule-width.
1
Mise en page
multi colonnes
2
Propriété
column-rule-width
Estimation de la prise en charge globale.
21%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Version testée : 108

Baidu Browser

Version testée : 13.18

Chrome

Version testée : 108

Chrome pour Androïd

Version testée : 108

Edge

Version testée : 108

Firefox

Version testée : 108

Firefox pour Androïd

Version testée : 107

Internet Explorer

Version testée : 11

KaiOS Browser

Version testée : 2.5
°

Opéra

Version testée : 92

Opéra Mobile

Version testée : 72

QQ Browser

Version testée : 13.1

Safari

Version testée : 16.2

Safari sur IOS

Version testée : 16.2

Samsung Internet

Version testée : 19.0

UC Browser pour Androïd

Version testée : 13.4

Opéra mini

Version testée : Toutes
Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Historique de la propriété column-rule-width.

  • Module CSS - Mise en page multi-colonnes - Niveau 1

    Première description des mises en page sur plusieurs colonnes.
    Introduction des propriétés qui s'y rapportent, dont column-rule-width.
    WD
    23 Juin 1999
    Document de travail.
    CR
    17 Décembre 2009
    Candidat à la recommandation.
    PR
    REC

Voir aussi, à propos des mises en page multi-colonnes.

La spécification CSS Multi-column Layout Module (Module CSS - Mise en page multi-colonnes) décrit tout ce qui concerne les mises en page multi-colonnes. La propriété column-rule-width est donc référencée dans ce module, ainsi que les termes ci-dessous :

Propriétés :

column-count
Définit le nombre de colonnes, dans une mise en page sur plusieurs colonnes.
column-fill
Gère la répartition du contenu entre les colonnes.
column-rule
Définit tous les paramètres du trait de séparation entre les colonnes.
column-rule-color
Définit la couleur des lignes de séparation de colonnes.
column-rule-style
Choisit le type de trait pour la séparation des colonnes.
column-span
Gère le chevauchement du contenu sur plusieurs colonnes.
column-width
Définit la largeur des colonnes.
columns
Définit les caractéristiques d'une mise en page sur plusieurs colonnes.