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