広くブラウザに対応しているにもかかわらず、CSSのコンテナクエリはいまだ使われず、しばしば誤解されている。Smashing Magazineの記事は、メディアクエリとの違いと使い分けをあらためて整理している。
両者は見る方向が逆である。メディアクエリはビューポートを外側から見て「画面はどれくらい広いか」を問う、マクロなレイアウトのための仕組みだ。対してコンテナクエリは、要素が置かれた文脈で「この要素にはどれだけの余地があるか」を内側から見る、マイクロなレイアウトのための仕組みである。
対応状況は約94%に達する一方、State of CSSの調査では、認知は86%あるのに実際に使う人は41.4%にとどまる。ページ全体の骨格やナビゲーション、prefers-color-schemeのようなシステム設定にはメディアクエリが向く。一方、 複数の文脈に現れる再利用可能なコンポーネント——カードやウィジェット、フォームのように、全幅グリッドでも狭いサイドバーでも成立させたい要素にはコンテナクエリが向く。
実用面の利点も大きい。cqiのような単位を使えば、ビューポートではなくコンポーネントの幅に連動したフルードなタイポグラフィが組める（例: ）。またコンテナサイズの変化を通じて、Flexアイテムがいつ折り返したかをJavaScriptなしで間接的に検知することもできる。
一方で注意点もある。要素は自分自身をクエリできないため親となるラッパーが必要になること、で縦方向を参照すると高さ指定がない場合に0pxへ潰れるため通常はが安全なこと、条件値にCSS変数を使えないことなどだ。メディアクエリを否定するのではなく、コンポーネント設計が主流となった今、どちらの道具がどの課題に向くのかを見極めることが重要だと記事は説く。
出典: Stop Treating CSS Container Queries Like Traditional Media Queries
