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

皆さまは CSS の `Container query length units` 訳すと `コンテナークエリーの長さの単位` は知っておられますでしょうか？ cqw / cqh / cqi / cqb / cqmin / cqmax の 親コンテナからの相対的な長さ単位のことです。

MDN だと次の様な説明がされています。

> # コンテナークエリーの長さの単位
> コンテナークエリーを用いてコンテナーにスタイルを設定する場合、コンテナークエリーの長さの単位を使用することができます。 この単位は、クエリーコンテナーの寸法関連の長さを指定します。 コンテナーに対して相対的な長さの単位を使用する部品は、具体的な長さの値を再計算することなく、様々なコンテナーで柔軟に使用することができます。 詳しい情報は、[コンテナークエリー](https://developer.mozilla.org/ja/docs/Web/CSS/CSS_containment/Container_queries)を参照してください。
> 
> - `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#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%8A%E3%83%BC%E3%82%AF%E3%82%A8%E3%83%AA%E3%83%BC%E3%81%AE%E9%95%B7%E3%81%95%E3%81%AE%E5%8D%98%E4%BD%8D

# 掲題

で掲題ですが、

上記では

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

と書いてあり、 コンテナクエリ自体は `@container` アットルールを使う必要があるのですが、そもそもそこ以外での扱いが知りたいところです……がMDNには書いていません。

で、掲題ですが、

そうです。 MDN には書いてないのですが、使えます。具体的には 

[CSS Conditional Rules Module Level 5](https://www.w3.org/TR/css-conditional-5/) に 下記の様な記述があります。

> #### 7. Container Relative Lengths: the cqw, cqh, cqi, cqb, cqmin, cqmax units
> ...
> For each element, [container query length](https://www.w3.org/TR/css-conditional-5/#container-query-length) units are evaluated as [container size queries](https://www.w3.org/TR/css-conditional-5/#container-size-query) on the relevant axis (or axes) described by the unit. The [query container](https://www.w3.org/TR/css-conditional-5/#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](https://www.w3.org/TR/css-values-4/#small-viewport-size) for that axis**.

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

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

```css
:where(:root) {
  container-type: size;
  @container (block-size >= 0) {
    /* USE CODE */
  }
}
```

# 動作確認

つまりこう

<p class="codepen" data-height="500" data-default-tab="result" data-slug-hash="YPzONJG" data-pen-title="@container 内と外での cqh のアクセス確認サンプル" data-user="juner" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/juner/pen/YPzONJG">
  @container 内と外での cqh のアクセス確認サンプル</a> by juner clarinet (<a href="https://codepen.io/juner">@juner</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

```css
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