Container - Propriété CSS

container
container-name
container-type

Résumé des caractéristiques de la propriété container

Description rapide
Définit les caractéristiques d'un conteneur utilisable dans une container query (contexte d'éléments confinés).
Statut
Standard
Utilisable sur
HTML
Pourcentages
Ne s'appliquent pas.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Non.
Type d'animation
Not animable : la propriété container ne peut pas être animée.
Module W3C
Module CSS - Confinement
Références (W3C)
Statut du document: WD (document de travail)

Schéma syntaxique de container.

container - Syntax DiagramSyntax diagram of the container CSS property. See stylescss.free.fr for details. id id none none / / normal normal inline inline inline-size inline-sizecontainer:;container:;
Schéma syntaxique de la propriété résumée container
Les liens du schéma donnent accès à plus de détails
container-name - Syntax DiagramSyntax diagram of the container-name CSS property. See stylescss.free.fr for details. none none id idcontainer-name:;container-name:;
Schéma syntaxique de la propriété
container-name
container-type - Syntax DiagramSyntax diagram of the container-type CSS property. See stylescss.free.fr for details. normal normal size size inline-size inline-sizecontainer-type:;container-type:;
Schéma syntaxique de la propriété
container-type

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 :

  • container-name : définit un nom pour le conteneur.
  • container-type : définit le type de conteneur.

Valeurs pour container.

  • 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: 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.

  • 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).

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 ou inline-size.

Valeurs communes à toutes les propriétés :

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.

Colonne 1
Traitement correct par les navigateurs de la propriété résumée container qui rassemble les valeurs pour container-name et container-type.
Colonne 2
Traitement correct par les navigateurs de la propriété container-name pour définir le nom d'un container.
Colonne 3
Traitement correct par les navigateurs de la propriété container-type qui définit le type d'un container.
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

    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.
    WD
    21 Décembre 2021
    Document de travail.
    CR
    PR
    REC

Voir aussi, au sujet du confinement (containment).

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

Propriétés :

contain
Propriété d'optimisation, pour faciliter et accélérer le travail de mise en page.
container-name
Attribue un identifiant à un élément pour en faire un conteneur utilisable dans une container query (contexte d'éléments confinés).
container-type
Définit le type d'un conteneur utilisable dans une container query (contexte d'éléments confinés).
content-visibility
Définit si le contenu de l'élément (y compris les sous-éléments) doit être restitué ou pas.

Directives :

@container
Permet d'écrire des règles CSS conditionnelles en fonction des caratéristiques du conteneur.