container
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis février 2023.
La propriété raccourcie CSS container établit l'élément comme conteneur de requêtes et précise le nom et le type du contexte de compartimentation utilisé dans une requête de conteneur.
Propriétés constituantes
Cette propriété est une propriété raccourcie pour les propriétés CSS suivantes :
Syntaxe
/* Valeurs de type <container-name> */
container: my-layout;
/* Valeurs de type <container-name> / <container-type> */
container: my-layout / size;
/* Valeurs globales */
container: inherit;
container: initial;
container: revert;
container: revert-layer;
container: unset;
Valeurs
<container-name>-
Un nom sensible à la casse pour le contexte de compartimentation. Plus de détails sur la syntaxe sont disponibles dans la page de la propriété
container-name. <container-type>-
Le type de contexte de compartimentation. Plus de détails sur la syntaxe sont disponibles dans la page de la propriété
container-type.
Définition formelle
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
|---|---|
| Applicabilité | tous les éléments |
| Héritée | non |
| Pourcentages | pour chaque propriété individuelle de la propriété raccourcie :
|
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
container =
<'container-name'> [ / <'container-type'> ]?
<container-name> =
none |
<custom-ident>+
<container-type> =
normal |
[ [ size | inline-size ] || scroll-state ]
Exemples
Établir la compartimentation de la taille en ligne
L'exemple HTML ci-dessous est un composant de type carte contenant une image, un titre et du texte :
<div class="poste">
<div class="carte">
<h2>Titre de la carte</h2>
<p>Contenu de la carte</p>
</div>
</div>
La manière explicite de créer un contexte de conteneur consiste à déclarer une container-type avec un container-name optionnel :
.poste {
container-type: inline-size;
container-name: sidebar;
}
La propriété raccourcie container permet de définir cela plus simplement en une seule déclaration :
.poste {
container: sidebar / inline-size;
}
Vous pouvez ensuite cibler ce conteneur par son nom en utilisant la règle @container :
@container sidebar (width >= 400px) {
/* <stylesheet> */
}
Spécifications
| Specification |
|---|
| CSS Conditional Rules Module Level 5 # container-shorthand |
Compatibilité des navigateurs
Voir aussi
- Les requêtes de conteneur CSS
- Utilisation des requêtes de taille et de style de conteneur
- La règle
@container - La propriété
contain - La propriété
container-type - La propriété
container-name - La propriété
content-visibility