Container - Propriété CSS

Schéma syntaxique de container.

Sur le schéma, les termes en gras sont les mots prédéfinis de CSS, les autres termes sont décrits ci-dessous :

• id est un identifiant qui pourra être utilisé dans une requête container query. Il doit être spécifié sans apostrophes ni guillemets. Voir @container.

Description de la propriété container.

La propriété container définit un nom et un type de conteneur. Ce dernier pourra ensuite être utilisé dans une requête container query. Voir la directive @container pour une présentation des requêtes container queries.

La propriété container est une propriété résumée, équivalente aux deux propriétés suivantes :

Consultez aussi :

Valeurs pour container-name.

• container-name: none;

  L'élément ciblé n'est pas utilisable comme un conteneur dans une requête container query.

• container-name: demo;

  Définit le nom demo comme l'identifiant de conteneur. Cet identifiant pourra être utilisé dans une requête container query.

Valeurs pour container-type.

• container-type: normal;

  L'élément ciblé ne peut pas être un conteneur pour une requête container query.

• container-type: inline-size;

  Définit que l'élément ciblé est un conteneur permettant à une requête container query de tester sa dimension dans la direction des lignes (la largeur pour les langues qui s'écrivent horizontalement comme les langues européennes). Reportez-vous à la directive @container pour d'autres exemples.

  Ce texte passe en bleu dès que la largeur du conteneur de confinement est inférieure à 180 pixels.
• container-type: size;

  Définit que l'élément ciblé est un conteneur permettant à une requête container query de tester n'importe laquelle de ses dimensions. La page sur la directive @container donne d'autres exemples.

  Ce texte passe en bleu dès que la hauteur du conteneur de confinement est supérieur à 100 pixels.
• container-type: scroll-state;

  L'élément ciblé est un conteneur défilant, permettant à une requête container query de tester l'état du défilement. Celui-ci peut être la possibilité de faire défiler l'élément dans une direction ou une autre. Mais d'autres exemples sont donnés sur la page @container.

  ⚠ Cet exemple ne fonctionne pas sur Firefox.

  Ce texte passe en bleu dès qu'il n'est plus possible de le faire défiler vers le bas.
  C'est à dire lorsque la barre de défilement vertical est à fond en bas.
  
   
• container-type: style; ⚠

  L'élément ciblé est un conteneur de confinement, permettant à une requête container query de tester la présence d'un style particulier.

  ⚠ Cette fonctionnalité est encore peu implémentée.

  Ce texte passe en bleu pour les éléments qui définissent une propriété personnalisée --bgcolor.

Valeurs pour container.

• container: none;

  Définit que l'élément ciblé n'est pas un conteneur, et ne pourra donc pas être utilisé dans une requête container query.

• container: demo;

  Avec cette syntaxe, ne comportant qu'une seule valeur, container est équivalent à container-name. Seul le nom du conteneur est défini, la valeur de container-type sera définie à sa valeur initiale, soit normal.

• container: demo / size;

  Le caractère slash / sépare le nom attribué au conteneur et le type de conteneur. Ce dernier peut être l'un des types acceptés par container-type : normal, size, inline-size ou scroll-state.

• container-name: initial; (none) container-name: inherit; container-name: revert; container-name: revertLayer; container-name: unset;

  container-type: initial; (normal) container-type: inherit; container-type: revert; container-type: revertLayer; container-type: unset;

  container: initial; container: inherit; container: revert; container: revertLayer; container: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Prise en charge de container par les navigateurs.

1

Propriété
container

2

Propriété
container-name

3

Propriété
container-type

Estimation de la prise en charge globale.

92%

92%

92%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Safari

Safari sur IOS

Opéra Mobile

QQ Browser

Baidu Browser

Chrome

Edge

Firefox

Opéra

Chrome pour Androïd

Samsung Internet

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

Historique de la propriété container.

• Module CSS - Confinement - Niveau 3

  Concernant container. Ce troisième niveau de la spécification introduit les propriétés container-name et container-style, ainsi que la propriété résumée container.
  

  21 Décembre 2021

  Document de travail.

  

  

  

Voir aussi, au sujet du confinement (containment).

La spécification CSS relative aux techniques de confinement est dénommée Module CSS - Confinement. La propriété container, ainsi que les suivantes, sont décrites dans ce module de la norme.

Propriétés :

Directives :