📓

@​container ルール使わなくても コンテナークエリーの長さ単位(cqw / cqh / ...) を使っていいんですか！？

に公開
CSS
tech

皆さまは 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 になります。

https://developer.mozilla.org/ja/docs/Web/CSS/length#コンテナークエリーの長さの単位

掲題

で掲題ですが、

上記では

コンテナークエリーを用いてコンテナーにスタイルを設定する場合、コンテナークエリーの長さの単位を使用することができます。

と書いてあり、 コンテナクエリ自体は @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.

https://www.w3.org/TR/css-conditional-5/#container-lengths

つまり前提として 下記の様な状態で記入している様なものです。

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

以上。

追伸

MDN に issues を投げました。

https://github.com/mdn/content/issues/38875

Discussion