CSS の Container Queries おためし

CSS に、コンテナクエリという機能があるらしい。

メディアクエリでは画面全体の大きさに応じて要素のスタイルを変えることができたけど、コンテナクエリを使うと当該要素の親の大きさに応じてスタイルを変えられる。

/* メディアクエリの例 */
/* 画面幅が 400px 以下だったら、div を赤くする */
@media screen and (max-width: 400px) {
  div {
    background-color: red;
  }
}

/* コンテナクエリの例 */
/* div の親要素の幅が 400px 以下だったら、div を赤くする */
@container (max-width: 400px) {
  div {
    background-color: red;
  }
}

その機能が Google Chrome Canary で使えるようにされたと聞いたので、使ってみた。

こういうのを作った↓

これは HTML/CSS だけでできていて、幅に応じて顔を変えるところはコンテナクエリを使って以下のように書かれている。

.cell-content {
  border-radius: 50px;
  background-color: #ffd3b4; /* オレンジ */
  background-image: url("./images/face-large.svg");
}

@container (max-width: 250px) {
  .cell-content {
    border-radius: 25px;
    background-color: #d5ecc2; /* 緑 */
    background-image: url("./images/face-medium.svg");
  }
}

@container (max-width: 150px) {
  .cell-content {
    border-radius: 10px;
    background-color: #a3e4d2; /* 青 */
    background-image: url("./images/face-small.svg");
  }
}

ここにも埋め込んでみた。Google Chrome Canary で「Enable CSS Container Queries」フラグを有効にしたら上記の gif のように動くはず。

実際使うには親要素に contain プロパティをつけたりする必要があるので、試したい方は以下のリポジトリのソースコードを参照するかもっとちゃんとした記事を読んでください。また、実験的機能なので今後仕様が変わるかもしれません。

github.com