Row-rule-color - Propriété CSS

row-rule-color

Résumé des caractéristiques de la propriété row-rule-color

Description rapide
Définit la couleur des filets de séparation des lignes dans le contexte d'un conteneur grille ou d'un flex-box.
Statut
Problèmes de compatibilité ⚠
S'applique à
Conteneurs grille, conteneurs flex-box
Utilisable sur
HTML
Pourcentages
Ne s'appliquent pas.
Valeur initiale
currentcolor
Héritée par défaut
Non.
Type d'animation
Computed value : lors d'une animation, la propriété row-rule-color passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Décorations des espaces.
Références (W3C)
Statut du document: WD (document de travail)

Schéma de la syntaxe de row-rule-color.

row-rule-color - Syntax DiagramSyntax diagram of the row-rule-color CSS property. currentcolor currentcolor transparent transparent color colorrow-rule-color:;row-rule-color:;
Schéma syntaxique de la propriété row-rule-color.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description des termes utilisés sur le schéma :

  • color est une couleur définir par l'une des syntaxes reconnues par CSS.
  • Plusieurs couleurs peuvent être énumérées, séparées par un espace.

Description de la propriété row-rule-color.

⚠
Cette propriété est encore expérimentale. Pour l'heure seuls quelques navigateurs la reconnaissent : Edge  , Chrome   par exemple.

row-rule-color définit la couleur du filet de séparation des lignes. Ces filets se trouvent entre les lignes dans un conteneur grille ou un conteneur flex-box. Ils prennent place dans l'espace entre les ligne (défini par row-gap) sans en augmenter la hauteur.

Reportez-vous également à la propriété équivalente pour les colonnes : column-rule-color, et à la propriété résumée row-rule. Vous pouvez également consulter une présentation générale sur rule.

Valeurs pour row-rule-color.

  • row-rule-color: #ff1852;

    Les filets entre les lignes seront de la couleur indiquée. Celle-ci peut être exprimée dans l'une quelconque des syntaxes reconnues par CSS : code hexadécimal, couleur nommée, fonction de couleur, etc.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    row-rule-color:lightBlue;
  • row-rule-color: #ff1852 white; row-rule-color: repeat(3, red blue green);

    Plusieurs valeurs peuvent être citées, en les séparant avec un espace. Chacun de ces valeurs s'applique à un des tirets de séparation de ligne. S'il y a plus de tirets que de ligne, la liste est reprise depuis le début.

    La fonction repeat() est acceptée ici. Reportez vous à sa description pour plus d'informations sur sa syntaxe.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    row-rule-color:red blue green;
  • row-rule-color: initial; (currentcolor) row-rule-color: inherit; row-rule-color: revert; row-rule-color: revertLayer; row-rule-color: unset;

    Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de row-rule-color.

La propriété row-rule-color peut être animée et les animations sont fluides (comme toutes les propriétés qui attendent une couleur). Ci-dessous, nous avons réalisée l'animation de row-rule-color sur une grille.

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T

Exemple interactif avec la propriété row-rule-color.

Avec ce simulateur, construit sur un conteneur flex, vous pouvez choisir une couleur à appliquer à row-rule-color et également faire varier les dimensions du conteneur.

row-rule-color :
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z

Compatibilité des navigateurs avec row-rule-color.

La propriété row-rule-color est encore mal reconnue : seuls les navigateur Chrome   et Edge   la reconnaissent.

Histoire de la propriété row-rule-color.

Voir aussi, à propos des décorations d'espaces.

Propriétés :

⚠
column-rule-break
Définit comment se comportent les filets de séparation des colonnes aux intersections avec les filets de séparation des lignes.
⚠
column-rule-outset
Détermine si les filets séparant les colonnes s'arrêtent aux intersections. Contexte : conteneur multi-colonnes, grille ou flex.
⚠
row-rule
Propriété résumée qui définit l'épaisseur, le style et la couleur des filets de séparation des lignes, dans le contexte d'un conteneur flex ou d'un conteneur grid.
⚠
row-rule-break
Définit comment les filets de séparation des lignes se comportent au niveau des intersection avec les traits de séparation des colonnes.
Row-rule-color
Définit la couleur des filets de séparation des lignes dans le contexte d'un conteneur grille ou d'un flex-box.
⚠
row-rule-outset
Spécifie de combien les filets séparant les lignes débordent aux intersections.
⚠
row-rule-style
Définit le style de trait à utiliser pour le filet séparant les lignes, dans le contexte d'un conteneur grille ou d'un conteneur flex-box.
⚠
row-rule-width
Définit l'épaisseur des filets de séparation de lignes dans un contexte de conteneur grille ou de conteneur flex-box.
⚠
rule
Propriété résumé qui affecte les mêmes valeurs aux filets séparant les lignes et à ceux séparant les colonnes.
⚠
rule-break
Propriété résumée qui définit comment se comportent les filets de séparation des lignes et des colonnes à leur intersection.
⚠
rule-color
Définit la couleur des filets de séparation des lignes et des colonnes, dans le contexte d'un conteneur grille ou d'un conteneur flex.
⚠
rule-outset
Propriété résumée qui définit à la fois le débordement des filets séparant les lignes et de ceux séparant les colonnes.
⚠
rule-paint-order
Définit lesquels des filets séparant les lignes ou des filets séparant les colonnes passent au dessus des autres.
⚠
rule-style
Définit le style de trait pour les filets entre les lignes et les colonnes, dans le contexte d'un conteneur grille ou d'un conteneur flex.
⚠
rule-width
Définit l'épaisseur des filets qui séparent les lignes et les colonnes, dans le contexte d'un conteneur flex ou grille.