Tout d'abord, un conteneur doit être enregistré et il peut être interrogé.

Enregistrer un conteneur

Utilisez un sélecteur pour enregistrer un conteneur.

.parent {
    container-name: myname;
    container-type: inline-size;
    ... other code
}

ou, utilisez l'option raccourcie

.parent {
    container: myname / inline-size;
    ... other code
}

Au moment de l'inscription, deux détails - le type et le nom - doivent être précisés.

Type de conteneur

type de conteneur : ...

• taille
• taille en ligne
• normale

Nom du conteneur

nom-conteneur :  ;

identifie le conteneur, particulièrement utile dans le cas d'un scénario comportant plusieurs conteneurs.

Interroger un conteneur

La requête de conteneur commence par la règle at @container suivie du nom du conteneur et de la requête de fonctionnalité.

div {
    font-size: 2em;
}

@container myname (width: > 30ch)
{
    div {
        font-size: 3em;
    }
}

requête de conteneur pour définir la taille de police du div à l'intérieur du conteneur myname sur 3em si la largeur de la fonctionnalité est supérieure à 30ch.

Fonctionnalités à interroger

requête de taille...

• largeur
• hauteur
• taille en ligne
• taille de bloc
• rapport d'aspect
• orientation

requête de style...

• style(propriété : valeur)

propriété dont la valeur doit être vérifiée.

par exemple

@container contname style('background-color: blue') {
    ... 
    styles 
    ...
}

La requête du conteneur pour appliquer des styles si la couleur d'arrière-plan du nom du conteneur est bleue

Requêtes composées

et, ou et non peut être utilisé pour créer des requêtes composées

par exemple

    @container myname (width>30ch) and (height>100px) {
        ...
    }

    @container myname not (color: blue) {
        ...
    }

Requêtes de conteneur imbriquées

Les requêtes de conteneur peuvent être imbriquées dans d'autres requêtes de conteneur.

par exemple

    @container myname (width>30ch) {
        ...
        @container myname (background-color: blue) {
            ...
        }
        @container myname (background-color: red) {
            ...
        }
    }