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