Zuerst muss ein Container registriert werden und dieser kann abgefragt werden.

Registrieren Sie einen Container

Verwenden Sie einen Selektor, um einen Container zu registrieren.

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

oder verwenden Sie die Kurzschriftoption

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

Bei der Registrierung müssen zwei Angaben – Art und Name – angegeben werden.

Containertyp

Containertyp: ...

• Größe
• Inline-Größe
• Normal

Containername

Containername: ;

identifiziert den Container, besonders nützlich, wenn Sie ein Szenario mit mehreren Containern haben.

Fragen Sie einen Container ab

Die Containerabfrage beginnt mit der @container at-Regel, gefolgt vom Namen des Containers und der Funktionsabfrage.

div {
    font-size: 2em;
}

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

Containerabfrage, um die Schriftgröße für das Div im Myname-Container auf 3em festzulegen, wenn die Feature-Breite größer als 30ch ist.

Abzufragende Funktionen

Größenabfrage...

• Breite
• Höhe
• Inline-Größe
• Blockgröße
• Seitenverhältnis
• Orientierung

Stilabfrage...

• Stil(Eigenschaft: Wert)

Eigenschaft, die auf Wert überprüft werden soll.

zum Beispiel

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

Die Containerabfrage zum Anwenden von Stilen, wenn die Hintergrundfarbe des Container-Contnames blau ist

Zusammengesetzte Abfragen

und, oder und nicht können zum Erstellen zusammengesetzter Abfragen verwendet werden

zum Beispiel

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

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

Abfragen für verschachtelte Container

Containerabfragen können in anderen Containerabfragen verschachtelt werden.

zum Beispiel

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