まずコンテナを登録する必要があり、コンテナをクエリできるようになります。

コンテナを登録する

セレクターを使用してコンテナを登録します。

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

または、短縮オプションを使用します

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

登録時に、タイプと名前の 2 つの詳細を指定する必要があります。

コンテナの種類

コンテナタイプ: ...

• サイズ
• インラインサイズ
• 普通

コンテナ名

コンテナ名: ;

はコンテナを識別します。複数のコンテナが存在するシナリオの場合に特に役立ちます。

コンテナのクエリ

コンテナ クエリは @container at-rule で始まり、その後にコンテナの名前と機能クエリが続きます。

div {
    font-size: 2em;
}

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

機能の幅が 30ch より大きい場合、myname コンテナ内の div のフォント サイズを 3em に設定するコンテナ クエリ。

クエリする機能

サイズクエリ...

• 幅
• 身長
• インラインサイズ
• ブロックサイズ
• アスペクト比
• 方向

スタイルクエリ...

• スタイル(プロパティ:値)

値をチェックするプロパティ。

例:

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

コンテナのcontnameの背景色が青の場合にスタイルを適用するコンテナクエリ

複合クエリ

and、or、not を使用して複合クエリを作成できます

例:

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

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

ネストされたコンテナクエリ

コンテナ クエリは他のコンテナ クエリ内にネストできます。

例:

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