Propriété CSS `rule-visibility-items`

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

Want more browser support for this feature? Tell us why.

En savoir plus
Voir la compatibilité complète

Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.

La propriété raccourcie CSS rule-visibility-items définit si les segments de règle sont peints dans les gouttières des lignes et des colonnes adjacentes aux zones vides.

Propriétés constitutives

Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :

Exemple interactif

rule-visibility-items: all;

rule-visibility-items: around;

rule-visibility-items: between;

rule-visibility-items: normal;

<section id="default-example">
  <section id="example-element">
    <p>Un poisson</p>
    <p>Deux poissons</p>
    <p>Poisson rouge</p>
    <p>Poisson bleu</p>
    <cite>-- Dr. Seuss</cite>
  </section>
</section>

#example-element {
  display: grid;
  rule: solid 5px red;
  gap: 10px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}
cite {
  grid-row: 3;
  grid-column: 3;
}

Syntaxe

css

/* Valeurs avec un mot-clé */
rule-visibility-items: all;
rule-visibility-items: around;
rule-visibility-items: between;
rule-visibility-items: normal;

/* Valeurs globales */
rule-visibility-items: inherit;
rule-visibility-items: initial;
rule-visibility-items: revert;
rule-visibility-items: revert-layer;
rule-visibility-items: unset;

Valeurs

Cette propriété est définie comme l'un des mots-clés suivants :

all: Les règles doivent être peintes dans tous les segments de gouttière, que les zones adjacentes contiennent ou non un élément.
around: Une règle doit être peinte dans un segment de gouttière si au moins l'une des deux zones adjacentes est occupée par un élément.
between: Une règle doit être peinte dans un segment de gouttière uniquement si les deux zones adjacentes sont occupées par des éléments.
normal: Avec les conteneurs de type grille, se comporte de la même manière que all. Dans une mise en page multi-colonnes, se comporte de la même manière que between. C'est la valeur par défaut.

La propriété rule-visibility-items définit si les segments de règle sont peints dans les gouttières adjacentes aux zones vides dans les gouttières entre les lignes et les colonnes des conteneurs multi-lignes et grilles comportant plus d'une ligne ou d'une colonne.

La valeur est un mot-clé unique qui définit la même valeur pour les propriétés column-rule-visibility-items et row-rule-visibility-items.

Définition formelle

Valeur introuvable dans la base de données

Syntaxe formelle

rule-visibility-items = 
  <'column-rule-visibility-items'>  

<column-rule-visibility-items> = 
  all      |
  around   |
  between  |
  normal

Exemples

Exemple simple

Dans cet exemple, nous définissons qu'une règle doit être dessinée entre deux zones de la grille si au moins une zone adjacente contient un élément de la grille.

HTML

Nous incluons une liste de duos sportifs dynamiques :

html

<ol>
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
  <li>Kerri Walsh + Misty May Treanor</li>
</ol>

CSS

Nous définissons la liste ordonnée (<ol>) comme un conteneur de grille, créant 4 colonnes et 4 lignes en définissant à la fois les propriétés grid-template-columns et grid-template-rows sur repeat(4, 1fr), et déplaçons le dernier élément vers la zone de grille en bas à droite à l'aide des propriétés grid-column et grid-row. Nous incluons un gap de 20px pour fournir suffisamment d'espace entre les colonnes pour accueillir nos règles de 5px. Nous définissons les règles de colonne sur dashed et les règles de ligne sur solid.

Enfin, nous définissons rule-visibility-items sur between, de sorte que les règles de ligne et de colonne ne sont peintes que si les deux zones de la grille adjacentes les contiennent un élément de la grille.

css

ol {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;

  column-rule: dashed 5px blue;
  row-rule: solid 5px red;

  rule-visibility-items: around;
}
li:last-child {
  grid-row: 4;
  grid-column: 4;
}

li {
  margin-left: 1em;
}
@layer no-support {
  @supports not (rule-visibility-items: around) {
    body::before {
      content: "Votre navigateur ne prend pas en charge la propriété raccourcie rule-visibility-items";
      background-color: wheat;
      display: block;
      text-align: center;
      padding: 1rem 0;
    }
  }
}