CSS Container Queries を試す

1. このページの目的

Container queries は、CSS: Container queries と :has() を試すでも試したが、:has() と合わせた内容だったので少々分かりにくかった。本ページでは、Container queries を単体で試す。

2. デモ

2-1. コード

HTML

<div class="demo">
  <div class="foo">左側</div>
  <div id="container1">
    <div class="container1-child">
      <span>右側（幅：XXXpx）</span>
    </div>
  </div>
</div>

CSS

.demo > #container1 {
  container-type: inline-size;
  container-name: container1;
  margin: 0;
  padding: 0;
  width: 100%;
}
.demo > #container1 > .container1-child{
  padding: 1em;
  background-color: #e0fcff;
}
@container container1 (width <= 500px) {
  .demo > #container1 > .container1-child  {
    background-color: yellow;
  }
}

2-2. 結果

以下の右側の幅が500px以下になると、色が変わる。

左側

右側（幅：px）

左側は固定幅。右側は残りの幅となる。
右側が container になっているのだが、その container そのものの背景色を変化させたかったので、二重に div 要素を作っている。

3. メモ

コンテナに指定した要素自体を、@container で変化させることはできない。つまり、「条件を指定したい要素」と「その条件に合致したときだけ、スタイルを指定したい要素」は必ず別にする必要がある。これは面倒。

4. 参考