ブラウザの横幅などに応じて応じて異なるスタイルを適用するのが メディアクエリ ですが、画面内の矩形領域(コンテナ)の横幅等に応じて異なるスタイルを適用するのが コンテナクエリ です。
コンテナの container-type に inline-size または size を指定し、@container で異なるスタイルを指定する条件とスタイルを指定します。下記の例では通常コンテナ(#c1)内のテキストは赤色ですが、横幅が600px以上のコンテナ(#c2)内のテキストは青色になります。
.container { container-type: inline-size; }
#c1 { width: 700px; }
#c2 { width: 500px; }
.text { color: red; }
@container (min-width: 600px) {
.text { color: blue; }
}
<div id="c1" class="container"> <div class="text">Card Title</div> </div> <div id="c2" class="container"> <div class="text">Card Title</div> </div>
通常は最も近い親コンテナのルールに従いますが、container-name でコンテナ名を付けてどのルールに従うかを指定することができます。
.container {
container-type: inline-size;
container-name: my-card;
}
@container my-card (min-width: 600px) {
.text { color: blue; }
}
コンテナクエリ内では下記の長さの単位を使用できます。