More than 1 year has passed since last update.

新時代のレスポンシブ対応!?コンテナクエリが全ブラウザ対応に!!

Posted at 2023-03-05

コンテナクエリとは

コンテナクエリが2023年2月14日についにFirefoxにサポートされました。
すでに対応済のChrome,Edge,Safariと合わせて、これですべてのブラウザで利用できるようになりました。

レスポンシブ対応でレイアウトを変えるには、メディアクエリ「@media」を使用してウインドウサイズを基準にするやり方が一般的ですが、
コンテナクエリ「@container」を使うことで、任意の要素を基準にできるので、より柔軟で楽なレスポンシブ対応が可能になります。

コンテナクエリのサポートブラウザ
https://caniuse.com/css-container-queries

container-typeプロパティを使用して、コンテナのタイプを指定します。
値は3つありますが、横幅を基準とすることが多いので、inline-sizeを使用することが多いと思います。

normal : 通常時の動作となります。
inline-size : インライン方向(通常は横方向)のサイズに応じて異なるスタイルを適用します。
size : インライン方向(通常は横方向)とブロック方向(通常は縦方向)のサイズに応じて異なるスタイルを適用します。

親のコンテナとなる　ul.list に container-type: inline-size を指定します。

//inline-sizeを指定の場合
ul.list {
  container-type: inline-size;
}

コンテナ幅が大きくなった場合に、下記のようにクエリを指定することで、コンテナ幅に応じてスタイルを切り替えることができます。
メディアクエリとは違って、コンテナ幅に基づいてコンポーネントのCSSを切り替えることができるため、これまでより柔軟でシンプルに記述できるケースが増えそうです。

@container(min-width:400px) {
  li.item {
    display: flex;
  }
}

コンテナクエリによって、今後のレスポンシブの書き方が変わってくると思います。
また、コンテナ幅で指定ができることで、自由度も増しコンポーネントごとに開発する場合には、非常に便利になりそうです。
すべてのブラウザで利用できるようになったので、これからはどんどんコンテナクエリを使っていこうと思います。