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-style - Propriété CSS

column-rule-style

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

Description rapide
Choisit le type de trait pour la séparation des colonnes.
Statut
Standard
Type de valeur
Valeur prédéfinie
Valeurs prédéfinies
none | dashed | solid | hidden | double | dotted | outset | inset | groove | ridge
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Discrète : lors d'une animation, la propriété column-rule-style passe d'une valeur à l'autre sans transition.
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-style.

column-rule-style définit le style de la ligne de séparation des colonnes. On retrouve les mêmes possibilités que pour le style des bordures.
Remarque : cette propriété ne concerne que les colonnes d'une mise en page multi-colonnes. Les colonnes des tableaux et des grilles ne sont pas concernées.

Reportez-vous à la page column-rule pour un aperçu de tous les paramètres concernant les lignes de séparation, et à la page columns pour une présentation générale des mises en pages en colonnes par CSS.

Syntaxes pour column-rule-style.

Syntaxe de column-rule-styleSchéma syntaxique de la propriété CSS column-rule-style (trait entre les colonnes). none none hidden hidden solid solid double double dotted dotted dashed dashed groove groove ridge ridge inset inset outset outsetcolumn-rule-style:;column-rule-style:;
  • column-rule-style: none;

    Valeur par défaut. Pas de ligne de séparation entre les colonnes.

  • column-rule-style: hidden;

    Ligne de séparation invisible. Dans la mesure où l'épaisseur de la ligne de séparation ne change pas la largeur de la gouttière (gap), cette valeur est équivalente à none.

  • column-rule-style: solid;

    Plusieurs styles de traits sont disponibles. Ils correspondent aux valeurs suivantes :

    solid
    Un trait simple
    double
    Un trait double
    dotted
    Une succession de points
    dashed
    Une succession de tirets
    groove
    Une ligne avec effet 3D : rainure (1)
    ridge
    Une ligne avec effet 3D : bourrelet (1)
    inset
    Une ligne avec effet 3D : incrustation (2)
    outset
    Une ligne avec effet 3D : relief (2)

    (1) Les effets 3D ne sont visibles que si l'épaisseur de la ligne est de au moins 3 pixels. Sur nos exemples, l'épaisseur est de 5 pixels.

    (2) Les effets inset et outset sont mal adaptés aux lignes de séparation de colonnes. En effet, ces effets nécessitent des lignes perpendiculaires, comme dans une bordure autour de l'élément. Appliqués à une simple ligne verticale, ils provoquent seulement un éclaircissement ou un assombrissement de la couleur de la ligne.

  • column-rule-style: initial; column-rule-style: inherit; column-rule-style: revert; column-rule-style: revert-layer; column-rule-style: unset;

    La valeur initiale est : none.

(1) La restitution correcte des effets 3D nécessite une épaisseur de trait de au moins 3 pixels et une couleur de luminosité intermédiaire.

Simulateur.

column-rule-style :
La gouttière, ou colombelle, est, en typographie et en imprimerie, l'espace vertical séparant deux colonnes de texte justifié. L’usage veut que sa valeur soit la largeur des deux lettres, mi, ou encore de quatre caractères moyens, et dépend donc du corps du caractère choisi. La gouttière peut ou non recevoir un filet vertical. (1)

(1) Texte issu de Wikipedia.

Prise en charge par les navigateurs (compatibilité).

Les mises en page multi-colonnes sont relativement bien prises en charge par les navigateurs récents, même s'il reste des incompatibilités, comme on peut le voir sur le tableau ci-dessous. Cependant la propriété column-rule-style est bien reconnue.

Colonne 1
Support 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-style.
1
Columns
2
column-rule-style
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 aussi, dans le même module de standardisation que column-rule-style.

Les spécifications CSS éditées par le W3C sont organisées en modules. column-rule-style 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 tous les paramètres du trait de séparation entre les colonnes.
Définit la couleur des lignes de séparation de 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.