Sofia Emelianova
CSS コンテナクエリは、ウェブ デベロッパーが注目している新しい CSS 機能です。ページベースのレスポンシブ デザインからコンテナベースのレスポンシブ デザインへと、ウェブデザインの革命が起こるかもしれません。
Chrome DevTools は、新しいレイアウト設計パターンを採用し、最新のトレンドを常に把握できるようにするためのツールです。この CSS 機能のサポートにより、DevTools でコンテナ クエリを検査してデバッグできるようになりました。
上の動画では、コンテナクエリの概要、構文、DevTools でクエリを検査する方法について説明しています。
コンテナ要素とその子孫を、対応するバッジで見つけられるようになりました。このバッジを切り替えると、点線オーバーレイが表示されます。
コンテナがクエリ条件を満たす場合に子孫に適用される @container ルールを検査します。
DevTools でのコンテナクエリのサポートの詳細については、CSS コンテナクエリを検査してデバッグするをご覧ください。