@container ルール使わなくても コンテナークエリーの長さ単位(cqw / cqh / ...) を使っていいんですか！？
皆さまは CSS の Container query length units 訳すと コンテナークエリーの長さの単位 は知っておられますでしょうか？ cqw / cqh / cqi / cqb / cqmin / cqmax の 親コンテナからの相対的な長さ単位のことです。
MDN だと次の様な説明がされています。
コンテナークエリーの長さの単位
コンテナークエリーを用いてコンテナーにスタイルを設定する場合、コンテナークエリーの長さの単位を使用することができます。 この単位は、クエリーコンテナーの寸法関連の長さを指定します。 コンテナーに対して相対的な長さの単位を使用する部品は、具体的な長さの値を再計算することなく、様々なコンテナーで柔軟に使用することができます。 詳しい情報は、コンテナークエリーを参照してください。
cqw: クエリーコンテナーの幅のパーセント値を表します。1cqwはコンテナーの幅の 1% です。例えば、クエリーコンテナーの幅が800pxの場合、プロパティに50cqwの値を指定すると 400px となります。cqh: クエリーコンテナーの高さのパーセント値を表します。1cqhはコンテナーの高さの 1% です。例えば、クエリーコンテナーの高さが300pxの場合、プロパティに10cqhの値を指定すると30pxとなります。cqi: クエリーコンテナーのインラインサイズのパーセント値を表します。1cqiはクエリーコンテナーのインラインサイズの 1% です。例えば、クエリーコンテナーのインラインサイズが800pxの場合、プロパティに50cqiの値を指定すると400pxとなります。cqb: コンテナーのブロックサイズのパーセント値を表します。1cqbはクエリーコンテナーのブロックサイズの1%です。例えば、クエリーコンテナーのブロックサイズが300pxの場合、プロパティに10cqbの値を指定すると30pxとなります。cqmin: クエリーコンテナーのインラインサイズまたはブロックサイズの小さい方の値のパーセント値を表します。1cqminは、クエリーコンテナーのインラインサイズまたはブロックサイズのいずれか小さい方の値の1%です。例えば、クエリーコンテナーのインラインサイズが800pxで、ブロックサイズが300pxの場合、プロパティで50cqminの値は150pxになります。cqmax: クエリーコンテナーのインラインサイズまたはブロックサイズのいずれか大きい方の値のパーセント値を表します。1cqmaxは、クエリーコンテナーのインラインサイズまたはブロックサイズのいずれか大きい値の 1% です。例えば、クエリーコンテナーのインラインサイズが800pxで、ブロックサイズが300pxの場合、プロパティで50cqmaxの値を指定すると400pxになります。
掲題
で掲題ですが、
上記では
コンテナークエリーを用いてコンテナーにスタイルを設定する場合、コンテナークエリーの長さの単位を使用することができます。
と書いてあり、 コンテナクエリ自体は @container アットルールを使う必要があるのですが、そもそもそこ以外での扱いが知りたいところです……がMDNには書いていません。
で、掲題ですが、
そうです。 MDN には書いてないのですが、使えます。具体的には
CSS Conditional Rules Module Level 5 に 下記の様な記述があります。
7. Container Relative Lengths: the cqw, cqh, cqi, cqb, cqmin, cqmax units
...
For each element, container query length units are evaluated as container size queries on the relevant axis (or axes) described by the unit. The query container for each axis is the nearest ancestor container that accepts container size queries on that axis. If no eligible query container is available, then use the small viewport size for that axis.
つまり前提として 下記の様な状態で記入している様なものです。
:where(:root) {
container-type: size;
@container (block-size >= 0) {
/* USE CODE */
}
}
動作確認
main {
&.type-1 {
padding: 1em;
height: calc(50vh - 1em);
container-type: size;
.main-1 {
/* ↓ 直近のコンテナは .type-1 な為そこから計算 */
height: 25cqh;
}
/* ↓ .type-1 が コンテナな為、利く */
@container (block-size >= 0) {
.main-2 {
height: 25cqh;
}
}
}
&.type-2 {
padding: 1em;
height: calc(50vh - 1em);
.main-3 {
/* ↓直近のコンテナは :root な為そこから計算 */
height: 25cqh;
}
/* ↓ .type-2 が コンテナでない為、利かない */
@container (block-size >= 0) {
.main-4 {
height: 25cqh;
}
}
}
}
以上。
Discussion