DevTools Tips: How to inspect CSS container queries
bookmark_borderbookmark
Stay organized with collections
Save and categorize content based on your preferences.
Sofia Emelianova
CSS container queries is the new CSS feature that web developers are excited about. It may trigger a revolution in web design—from page-based responsive design to container-based responsive design.
Chrome DevTools is here to help you adopt new layout design patterns and stay on top of the latest trends. With the support of this CSS feature, you can now inspect and debug your container queries in DevTools.
The video above gives you an overview of container queries, their syntax, and how to inspect them in DevTools.
You can now discover container elements and their descendants with the corresponding badge that toggles a dotted-line overlay.
Inspect @container rules applied to descendants when containers satisfy query conditions.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2022-06-30 UTC."],[],[]]