CSSのコンテナクエリを使ってみる

コンテナサイズクエリでの設定を中心に、コンテナクエリの実装を試してみます。

対応ブラウザ

コンテナクエリには「コンテナサイズクエリ」と「コンテナスタイルクエリ」の2種類があります。
コンテナサイズクエリはコンテナ要素(祖先要素)のサイズに基づいてスタイルを適用でき、主要なブラウザで対応しています。
主要なブラウザで最後にサポートされたのがFirefoxで、バージョン110(2023年2月14日リリース)での対応になります。

コンテナスタイルクエリはコンテナ要素のスタイルに基づいてスタイルを適用でき、SafariとFirefoxで非対応、chromeとedgeではカスタムプロパティを使った設定のみ対応となっています。

今回は主要なブラウザで対応しているコンテナサイズクエリについて主に試してみます。

サンプルコード

.containerをコンテナ要素として、.boxにスタイルを適用する形で試してみます。

<div class="container">
  <div class="box">BOX</div>
</div>

コンテナ要素に対してcontainer-typeを指定して、@containerを使ってコンテナクエリを定義します。

.container {
	width: 50vw;
	height: 50vh;
	container-type: inline-size;
}
.box {
	width: 100%;
	height: 100%;
	color: lime;
}
@container (min-width: 600px) {
	.box {
		color: orange;
	}
}

これでコンテナ要素の幅が600px以上の場合に文字色の変更ができました。
コンテナサイズクエリのデモページ

上記に記載の通り、container-type: inline-size を指定した場合、インライン軸(横方向)に基づいた設定になります。
前述の例に@containerでheightを使った定義を追加してみます。

.container {
	width: 50vw;
	height: 50vh;
	container-type: inline-size;
}
.box {
	width: 100%;
	height: 100%;
	color: lime;
}
@container (min-width: 600px) {
	.box {
		color: orange;
	}
}
@container (min-height: 300px) {
	.box {
		background-color: skyblue;
	}
}

これでコンテナ要素の高さが300px以上の場合に背景色が設定されそうに思いますが、設定されません。

コンテナサイズクエリのデモページ2

container-type: inline-size をsizeに変更してみます。

.container {
	width: 50vw;
	height: 50vh;
	container-type: size;
}
.box {
	width: 100%;
	height: 100%;
	color: lime;
}
@container (min-width: 600px) {
	.box {
		color: orange;
	}
}
@container (min-height: 300px) {
	.box {
		background-color: skyblue;
	}
}

sizeの場合はコンテナ要素のインラインとブロック軸(横方向と縦方向)に基づいた設定になるため、コンテナ要素の高さが300px以上の時に背景色が設定されました。
コンテナサイズクエリのデモページ3

親要素のみでなく、祖先要素もコンテナ要素にできます。

<div class="wrapper">
  <div class="container">
    <div class="box">BOX</div>
  </div>
</div>

.wrapperをコンテナ要素にしてみます。

.wrapper {
	container-type: inline-size;
}
.container {
	width: 50vw;
	height: 50vh;
}
.box {
	width: 100%;
	height: 100%;
	color: lime;
}
@container (min-width: 600px) {
	.box {
		color: orange;
	}
}

.wrapperのサイズに応じたスタイル適用に変更されました。
コンテナサイズクエリのデモページ4

祖先要素の複数でcontainer-typeが設定されている場合、近い祖先に基づいて設定されます。

.wrapper {
	container-type: inline-size;
}
.container {
	width: 50vw;
	height: 50vh;
	container-type: inline-size;
}
.box {
	width: 100%;
	height: 100%;
	color: lime;
}
@container (min-width: 600px) {
	.box {
		color: orange;
	}
}

この場合は.containerがコンテナ要素になります。
コンテナサイズクエリのデモページ5

container-nameでコンテナ要素に名前をつけて、@container指定することもできます。
前の例で複数要素にcontainer-typeを設定した場合は.containerがコンテナ要素になりましたが、.wrapperがコンテナ要素になるようにしてみます。

.wrapper {
	container-type: inline-size;
	container-name: wrapper;
}
.container {
	width: 50vw;
	height: 50vh;
	container-type: inline-size;
}
.box {
	width: 100%;
	height: 100%;
	color: lime;
}
@container wrapper (min-width: 600px) {
	.box {
		color: orange;
	}
}

.wrapperをコンテナ要素に設定できました。
コンテナサイズクエリのデモページ6

containerでcontainer-typeとcontainer-nameの一括指定ができます。

.wrapper {
  container: wrapper / inline-size;
}
.container {
	width: 50vw;
	height: 50vh;
	container-type: inline-size;
}
.box {
	width: 100%;
	height: 100%;
	color: lime;
}
@container wrapper (min-width: 600px) {
	.box {
		color: orange;
	}
}

コンテナサイズクエリのデモページ7

最後にコンテナスタイルクエリについて簡単に試してみます。

<div class="container">
  <div class="box">BOX</div>
</div>

<div class="container --dark">
  <div class="box">BOX</div>
</div>

@containerはstyle()にカスタムプロパティを設定して定義します。

.container {
	--theme: aqua;
	background: var(--theme);
}
.container.--dark {
	--theme: black;
}
@container style(--theme: black) {
	.box {
		color: white;
	}
}

.containerに.–darkが付与されている場合はカスタムプロパティ(–theme)の値をblackに変更して、コンテナスタイルクエリではそのカスタムプロパティを使って.boxのスタイルを変更しています。
コンテナスタイルクエリのデモページ