@container（コンテナクエリ）

2023.04.06

メディアクエリ（@media）はビューポートサイズに基づくが、コンテナクエリは文字通り親コンテナに基づいてスタイルを定義できる。これによりコンポーネントを複数のコンテクストで使用でき、コンポーネント単位の実装も簡単になる。
親の幅が大きくなると、コンポーネントもそれに応じて変化するようになる。
containerプロパティと@containerを使用する。
CSSのコンテナクエリは、2023年2月14日にFirefox 110でサポートされ、すべてのブラウザにサポートされるようになった。

【参考】
https://coliss.com/articles/build-websites/operation/css/about-css-container-queries.html

.o-grid__item {
  container: layout inline-size; /* インライン方向のサイズ（基本的に横幅）を基準とする */

  /* コンテナのタイプのみ指定する場合、container-typeにしないと反映されない */
  container-type: inline-size;
}

@container (min-width: 400px) {
  .c-article {
    display: flex;
    flex-wrap: wrap;
  }
  /* 他のスタイルを記述 */
}

containerプロパティ

containerプロパティはcontainer-typeとcontainer-nameのショートハンド。
コンテナクエリの最初のステップは、containerプロパティを追加することである。コンポーネントは親の幅に応じて変化するため、ページ全体ではなく、影響を受けるエリアのみを再描画するようにブラウザに伝える必要がある。containerプロパティを使用して、そのことを事前にブラウザに知らせることができる。inline-sizeという値は、親の幅の変更にのみに反応することを意味している。

  • container-typeプロパティ：コンテナのタイプを定義する
    • inline-size : インライン軸（基本的に横幅）を基準とする
    • size : インライン軸とブロック軸（縦横幅）を基準とする
    • normal : 基本値（通常動作）
  • container-nameプロパティ：コンテナ名を定義することができる。container-nameプロパティは必須ではない。無い場合は最も近いコンテナ指定された祖先要素をコンテナとする
inserted by FC2 system