Rule-visibility-items - Propriété CSS

rule-visibility-items
row-rule-visibility-items
column-rule-visibility-items

Résumé des caractéristiques de la propriété rule-visibility-items

Description rapide
Définit si les traits de séparation doivent être affichés tout le temps, seulement lorsqu'il y a un élément à coté, ou lorsque le trait se trouve entre deux éléments.a
Statut
Problèmes de compatibilité ⚠
Valeurs prédéfinies
normal | around | between | all
Pourcentages
Ne s'appliquent pas.
Valeur initiale
noraml
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété rule-visibility-items passe d'une valeur à l'autre sans transition.
Ordre canonique
Single : valeur unique (l'ordre n'intervient pas).
Module W3C
Module CSS - Décorations des espaces.
Références (W3C)
Statut du document: WD (document de travail)

Syntaxe de rule-visibility-items (schéma).

rule-visibility-items - Syntax DiagramSyntax diagram of the rule-visibility-items CSS property, who determines when the separation lines are displayed normal normal around around between between all allrule-visibility-items:;rule-visibility-items:;
Schéma syntaxique de la propriété rule-visibility-items.
La syntaxe est la même pour column-rule-visibility-items et row-rule-visibility-items
Détails sur les valeurs.
Télécharger le schéma en SVG.

Description de la propriété rule-visibility-items.

⚠
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-visibility-items s'applique aux conteneurs (flex-box, grille, etc.) creux, c'est à dire comportant des emplacements sans contenu. Sur une grille par exemple cela peut être obtenu en fixant manuellement grid-row et grid-column.

La propriété détermine si les filets doivent être affichés tout le temps, même quand il n'y a pas d'élément à côté du filet, lorsqu'il n'y a qu'un seul élément ou lorsque le filet est entre deux éléments, comme le montre l'exemple ci-dessous :

 
 
all
 
 
around
 
 
between

Valeurs pour rule-visibility-items.

    ⚠ Nos exemples ne fonctionnement bien sûr que sur les navigateurs compatibles (voir le tableau ci-dessous). Les exemples sur un conteneur flex-box semble ne fonctionner sur aucun navigateur.

  • column-rule-visibility-items: normal; row-rule-visibility-items: normal; rule-visibility-items: normal;

    C'est la valeur par défaut de la propriété. Sur un conteneur grille, normal est équivalent à all. Sur un conteneur flex-box, lorsque la valeur est appliquée à column-rule-visibility-items elle est équivalente à between, mais appliquée à row-rule-visibility-items elle est équivalente à all.

    Grille
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:normal;
    Flex-box
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:normal;
  • column-rule-visibility-items: around; row-rule-visibility-items: around; rule-visibility-items: around;

    Le filet est tracé seulement s'il y a au moins un élément d'un côté ou de l'autre du filet.

    Grille
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:around;
    Flex-box
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:around;
  • column-rule-visibility-items: between; row-rule-visibility-items: between; rule-visibility-items: between;

    Le filet est tracé seulement s'il se trouve entre deux éléments.

    Grille
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:between;
    Flex-box
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:between;
  • column-rule-visibility-items: all; row-rule-visibility-items: all; rule-visibility-items: all;

    Les filets sont tracés dans tous les cas, même si aucun élément ne les côtoie.

    Grille
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:all;
    Flex-box
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    rule-visibility-items:all;
  • rule-visibility-items: initial; (noraml) rule-visibility-items: inherit; rule-visibility-items: revert; rule-visibility-items: revert-layer; rule-visibility-items: revert-rule; rule-visibility-items: unset;

    Liens vers la présentation de ces différentes valeurs : initial, inherit, revert, revert-layer, revert-rule, unset.

Possibilité d'animation de la propriété rule-visibility-items.

La propriété rule-visibility-items peut être animée de façon discrete (passage brutal d'une valeur à une autre), comme le montre l'exemple ci-dessous.

 
 
 
 
 
 
 
 
 
 

Simulateur avec la propriété rule-visibility-items.

Le simulateur vous permet de tester les propriétés row-rule-visibility-items et column-rule-visibility-items sur un conteneur grille.

column-rule-visibility-items :
row-rule-visibility-items :
 
 
 
 
 
 
 
 
 
 

Support de rule-visibility-items.

Pour l'instant (2026), seuls deux grands navigateurs traitent la propriété rule-visibility-items : Chrome  , Edge   et quelques navigateurs sur mobile.

Colonne 1
Prise en charge de la propriété rule-visibility-items qui indique à quel moment les filets de séparation des lignes et des colonnes doivent être visibles.
Colonne 2
Prise en charge de la propriété row-rule-visibility-items qui indique à quel moment les filets de séparation des lignes doivent être visibles.
Colonne 3
Prise en charge de la propriété column-rule-visibility-items qui indique à quel moment les filets de séparation des colonnes doivent être visibles.
1
Propriété
rule-visibility-items
2
Propriété
row-rule-visibility-items
3
Propriété
column-rule-visibility-items
Estimation de la prise en charge globale.
57%
57%
57%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Safari sur IOS

Opéra

Samsung Internet

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse
Caniuse

Évolution de la propriété rule-visibility-items.

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

    Ce module reprend les règles qui définissent les filets entre les colonnes dans un conteneur multi-colonnes (grille, flex-box, etc.). Il étend ces possibilités aux filets entre les éléments disposés sur plusieurs lignes, ce qui permet d'utiliser ces fonctionnalités sur d'autres types de conteneurs. Plusieurs propriétés définissent comment ces filets doivent être dessinés.

    Concernant rule-visibility-items Première présentation de la propriété résumée rule-visibility-items.
    WD
    17 Avril 2025
    Document de travail.
    CR
    PR
    REC

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

Le module CSS - Décorations des espaces. regroupe les propriétés qui concerne les filets de décoration, y compris celle qui étaient au préalable dans le "Module CSS - multi-colonnes" (comme celles dont le nom commence par column-rule...). VOici ces propriétés :

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-inset
Définit l'espacement aux extrémités des filets de séparation des colonnes (dans un conteneur grille ou tout autre conteneur faisant apparaître des blocs en colonnes).
Column-rule-visibility-items
Définit si les traits de séparation des colonnes doivent être affichés tout le temps, seulement lorsqu'il y a un élément à coté, ou lorsque le trait se trouve entre deux éléments.
⚠
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-inset
Définit l'espacement aux extrémités des filets de séparation des lignes (dans un conteneur grille ou tout autre conteneur faisant apparaître des blocs en colonnes).
⚠
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-visibility-items
Définit si les traits de séparation des lignes doivent être affichés tout le temps, seulement lorsqu'il y a un élément à coté, ou lorsque le trait se trouve entre deux éléments.
⚠
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é 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, d'un conteneur flex, ou tout autre conteneur faisant apparaître des blocs en lignes ou en colonnes.
⚠
rule-inset
Détermine si les filets séparant les lignes et ceux séparant les colonnes se touchent aux intersections (dans le contexte d'un conteneur grille ou de tout autre conteneur présentation des blocs en lignes et en colonnes).
⚠
rule-overlap
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, d'un conteneur flex, ou de tout autre conteneur faisant apparaître des blocs en lignes et en colonnes.
Rule-visibility-items
Définit si les traits de séparation doivent être affichés tout le temps, seulement lorsqu'il y a un élément à coté, ou lorsque le trait se trouve entre deux éléments.a
⚠
rule-width
Définit l'épaisseur des filets qui séparent les lignes et les colonnes, dans le contexte d'un conteneur faisant apparaître des blocs en lignes et en colonnes (grille, flex-box, etc.).