レスポンシブウェブデザインが登場して以来、開発者はブラウザのビューポートサイズではなく、DOM要素の実際のサイズに基づいてスタイルを設定できる機能（メディアクエリを使用）を求めてきました。実際、コンテナクエリ（元々は要素クエリ）は、ブラウザにまだ実装されていないCSS機能の中で最も要望の多い機能と言えるでしょう。
すでに存在する多くの、多くの、多くのコンテナクエリはCSSで実装すると、ブラウザメーカーが躊躇しているなぜそれらを実装することは困難である理由を正確に説明ポストは。 今すぐ楽しみたい場合は、JavaScriptを少し使用すると役立ちます:
c51c33e1533e68c3f8fd24633700789f
全体がこのようになります:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
ブレークポイント、セレクター、およびスタイル属性を使用して、さまざまなブレークポイント、自動セレクター、および追加されるクラスのタイプを定義できます。 スクリプトを使用している場合は、新しく生成されたクラスを次のようにアドレス指定できます。:
c51c33e1533e68c3f8fd24633700789f
コンテナ クエリの使用は、オーバーレイ、ポップアップ、サイドバー、またはカスタム要素の要素に対して特に価値があります。たとえば、上記のスクリプトを使用した場合でも同様です。