CSS のコンテナ クエリ

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

コンテナを登録する

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

.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;
    }
}




</p>
<p>機能の幅が 30ch より大きい場合、myname コンテナ内の div の font-size を 3em に設定するコンテナ クエリ。</p>

<h3>
  
  
  クエリする機能
</h3>

<p><strong>サイズクエリ...</strong></p>

<ul>
<li>幅</li>
<li>身長</li>
<li>インラインサイズ</li>
<li>ブロックサイズ</li>
<li>アスペクト比</li>
<li>方向</li>
</ul>

<p><strong>スタイルクエリ...</strong></p>

<ul>
<li>スタイル(プロパティ:値)</li>
</ul>

<p>値をチェックするプロパティ。</p>

<p>たとえば<br>
</p>

<pre class="brush:php;toolbar:false">@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) {
            ...
        }
    }

以上がCSS のコンテナ クエリの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。