Rule-paint-order - Propriété CSS

rule-paint-order

Résumé des caractéristiques de la propriété rule-paint-order

Description rapide
Définit lesquels des filets séparant les lignes ou des filets séparant les colonnes passent au dessus des autres.
Statut
Problèmes de compatibilité ⚠
S'applique à
Conteneurs grille, conteneurs flex-box
Utilisable sur
HTML
Valeurs prédéfinies
row-over-column | column-over-row
Pourcentages
Ne s'appliquent pas.
Valeur initiale
row-over-column
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété rule-paint-order passe d'une valeur à l'autre sans transition.
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 rule-paint-order.

rule-paint-order - Syntax DiagramSyntax diagram of the rule-paint-order CSS property. row-over-column row-over-column column-over-row column-over-rowrule-paint-order:;rule-paint-order:;
Schéma syntaxique de la propriété rule-paint-order.
Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.

Description de la propriété rule-paint-order.

⚠
Cette propriété est expérimentale. Elle est décrite dans le module css-gaps (CSS Gap Decorations Module). Pour l'instant aucun navigateur ne la reconnaît.
Cette page sera prochainement complétée.

La propriété rule-paint-order définit si ce sont les filets séparant les lignes ou ceux séparant les colonnes qui sont tracés en premier. Autrement dit, aux intersections, lesquels seront visibles. Cette propriété s'appliquent aux conteneurs flex et aux conteneurs grille.


Voyez la page sur rule pour une synthèse des propriétés relatives aux filets.

Valeurs pour rule-paint-order.

  • rule-paint-order: row-over-column;

    Les filets de séparation des lignes passent au dessus de celui de séparation des colonnes. C'est la valeur initiale de la propriété.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    row-paint-order:row-over-column;
  • rule-paint-order: column-over-row;

    Ce sont les filets de séparation des colonnes qui passe au dessus de ceux des lignes. Il est probable que cela ne fonctionnera pas sur votre navigateur.

    A
    B
    C
    D
    E
    F
    G
    H
    I
    J
    K
    L
    M
    N
    O
    P
    Q
    R
    S
    T
    row-paint-order:column-over-row;
  • rule-paint-order: initial; (row-over-column) rule-paint-order: inherit; rule-paint-order: revert; rule-paint-order: revertLayer; rule-paint-order: unset;

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

Exemple d'animation de rule-paint-order.

La propriété rule-paint-order s'animera de façon discrete (passage brutal d'une valeur à une autre) dès que les navigateurs la reconnaîtront.

A
B
C
D
E
F
G
H
I
J
K
L
M
N
O

Exemple interactif avec la propriété rule-paint-order.

Le simulateur vous permet de tester la propriété sur un conteneur grille.

rule-paint-order :
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O

Compatibilité des navigateurs avec rule-paint-order.

Pour l'instant (2025), aucun navigateur ne traite la propriété rule-paint-order.

Histoire de la propriété rule-paint-order.

  • Module CSS - Décoration des espaces - Niveau 1.

    Introduction de la propriété rule-paint-order pour définir lesquels des filets séparant les lignes ou des filets séparant les colonnes passent au dessus des autres.
    WD
    17 Avril 2025
    Document de travail.
    CR
    PR
    REC

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-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.