Propriété CSS container-type

Syntaxe

/* Valeurs avec un mot-clé */
container-type: normal;
container-type: size;
container-type: inline-size;
container-type: scroll-state;
container-type: anchored;

/* Deux valeurs */
container-type: size scroll-state;

/* Valeurs globales */
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;

Valeurs

La propriété container-type peut prendre une seule valeur parmi la liste ci-dessous, ou deux valeurs. Dans le cas de deux valeurs, l'une doit être scroll-state et l'autre peut être inline-size ou size.

anchored

Établit un conteneur de requête pour les requêtes de conteneur ancré sur le conteneur. Dans ce cas, la taille de l'élément n'est pas calculée de façon isolée ; aucune compartimentation n'est appliquée.

inline-size

Établit un conteneur de requête pour les requêtes dimensionnelles sur l'axe en ligne du conteneur. Applique la compartimentation du style et de inline-size à l'élément. La taille en ligne de l'élément peut être calculée isolément, en ignorant les éléments enfants (voir Utiliser la compartimentation CSS).

normal

Valeur par défaut. L'élément n'est pas un conteneur de requête pour les requêtes de taille, d'état de défilement ou ancrées, mais peut être utilisé comme conteneur de requête pour les requêtes de style de conteneur et les requêtes de conteneur uniquement par nom.

scroll-state

Établit un conteneur de requête pour les requêtes d'état de défilement sur le conteneur. Dans ce cas, la taille de l'élément n'est pas calculée isolément ; aucune compartimentation n'est appliquée.

size

Établit un conteneur de requête pour les requêtes de taille de conteneur dans les dimensions en ligne et de bloc. Applique la compartimentation du style et de la taille à l'élément. La compartimentation de taille est appliquée à l'élément dans les directions en ligne et de bloc. La taille de l'élément peut être calculée isolément, en ignorant les éléments enfants.

Définition formelle

Syntaxe formelle

container-type = 
  normal                                      |
  [ [ size | inline-size ] || scroll-state ]  

Description

Les requêtes de conteneur permettent d'appliquer sélectivement des styles à l'intérieur d'un conteneur en fonction de requêtes conditionnelles effectuées sur ce conteneur. La règle @container sert à définir les tests réalisés sur un conteneur et les règles qui s'appliquent à son contenu si la requête retourne true.

Certains types de requêtes de conteneur ne peuvent être effectués que sur des éléments pour lesquels des valeurs spécifiques ont été définies pour la propriété container-type, ce qui établit des contextes de conteneur spécifiques sur ces conteneurs :

• Taille : Permet d'appliquer sélectivement des règles CSS aux enfants d'un conteneur, en fonction d'une condition de taille générale ou en ligne, telle qu'une dimension maximale ou minimale, un rapport d'aspect ou une orientation.
• État de défilement : Permet d'appliquer sélectivement des règles CSS aux enfants d'un conteneur, en fonction d'une condition d'état de défilement, comme si le conteneur est partiellement défilé ou s'il est une cible d'accrochage qui va être accrochée à son conteneur d'accrochage de défilement.
• Ancré : Permet d'appliquer sélectivement des règles CSS aux enfants d'un conteneur, en fonction de si le conteneur est positionné par ancre et a une option de repli de position appliquée.

Si un container-type n'est pas défini sur un conteneur, l'élément n'est pas un conteneur de requêtes pour les requêtes de taille, d'état de défilement ou ancrées, mais peut toujours être utilisé comme conteneur de requêtes pour les requêtes de style de conteneur et les requêtes de conteneur uniquement par nom.

Requêtes de taille de conteneur

Les requêtes de taille de conteneur permettent d'appliquer sélectivement des règles CSS aux descendants d'un conteneur en fonction d'une condition de taille, comme une dimension maximale ou minimale, un rapport d'aspect ou une orientation.

Les conteneurs de taille ont également la compartimentation de taille appliquée — cela empêche un élément d'obtenir des informations de taille à partir de son contenu, ce qui est important pour éviter les boucles infinies avec les requêtes de conteneur. Sans cela, une règle CSS à l'intérieur d'une requête de conteneur peut modifier la taille du contenu, ce qui peut rendre la requête fausse et modifier la taille de l'élément parent, ce qui peut à son tour modifier la taille du contenu et rendre la requête vraie, et ainsi de suite. Cette séquence se répéter alors indéfiniment.

La taille du conteneur doit être définie par le contexte, comme les éléments de niveau bloc qui s'étendent sur toute la largeur de leur parent, ou explicitement. Si une taille contextuelle ou explicite n'est pas disponible, les éléments avec la compartimentation de taille s'effondrent.

Requêtes d'état de défilement du conteneur

Les requêtes d'état de défilement du conteneur permettent d'appliquer sélectivement des règles CSS aux enfants d'un conteneur en fonction d'une condition d'état de défilement, comme :

• Si le contenu du conteneur est partiellement défilé.
• Si le conteneur est une cible d'accrochage qui va être accrochée à un conteneur d'accrochage de défilement.
• Si le conteneur est positionné avec position: sticky et est collé à une limite d'un conteneur de défilement.

Dans le premier cas, le conteneur interrogé est le conteneur de défilement lui-même. Dans les deux autres cas, le conteneur interrogé est un élément affecté par la position de défilement d'un conteneur de défilement ancêtre.

Requêtes de conteneur ancré

Les requêtes de conteneur ancré permettent d'appliquer sélectivement des règles CSS aux descendants d'un conteneur positionné par une ancre lorsqu'une option de repli d'essai de position est active sur celui-ci, comme défini par la propriété position-try-fallbacks.

Par exemple, vous pouvez avoir un élément infobulle positionné par une ancre qui est placé au-dessus de son ancre par défaut grâce à une valeur position-area de top, mais qui possède une valeur position-try-fallbacks de flip-block définie. Cela fait basculer l'infobulle dans la direction du bloc vers le bas de son ancre lorsqu'elle commence à déborder du haut de la zone d'affichage. Si l'on définit container-type: anchored dessus, on peut détecter quand l'option de repli d'essai de position est appliquée à l'aide d'une règle @container et appliquer du CSS en conséquence.

.tooltip {
  position: absolute;
  position-anchor: --monAncre;
  position-area: top;
  position-try-fallbacks: flip-block;
  container-type: anchored;
}

Exemples

Mettre en place la compartimentation de taille en ligne

Prenez l'exemple HTML suivant qui est un composant carte avec une image, un titre et du texte :

<div class="conteneur">
  <div class="carte">
    <h3>Carte normale</h3>
    <div class="contenu">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<div class="conteneur large">
  <div class="carte">
    <h3>Carte plus large</h3>
    <div class="contenu">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

Pour créer un contexte de conteneur, ajoutez la propriété container-type à un élément. L'exemple suivant utilise la valeur inline-size :

.conteneur {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.large {
  width: 500px;
}

h3 {
  height: 2rem;
  margin: 0.5rem;
}

.carte {
  height: 100%;
}

.contenu {
  background-color: wheat;
  height: 100%;
}

.conteneur {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}

Écrire une requête de conteneur avec la règle @container applique des styles aux éléments du conteneur lorsque celui-ci est plus large que 400px :

@container (width > 400px) {
  .carte {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Spécifications

Compatibilité des navigateurs

Voir aussi

• Requêtes de conteneur CSS
• Utiliser les requêtes de taille et de style de conteneur
• Utiliser les requêtes d'état de défilement du conteneur
• Utiliser les requêtes de conteneur ancré
• La règle @container
• La propriété raccourcie container
• La propriété container-name
• La propriété content-visibility