 The CSS Container Queries give us a much more dynamic approach to responsive design. You can use depth tools to inspect and edit them. But first of all, what exactly are CSS Container Queries and why do we need them? Hmm, it would be nice if we have a CSS expert to shed some light on this. Hi. Hey, Yuna. Hey, Jesslyn. Thanks for having me on your show. I'm Yuna from Designing in the Browser. Container Queries are a capability that completely shifts how we think about responsive design today. For the first time, we can look inside our page interfaces to style the elements within them based on their parent elements. You can think of a Container Query like a Media Query with App Media, but instead of relying only on the viewport and global meta information to adjust styles, you can use any parent container of the element you're targeting to adjust its styles. That means that a card like this coffee card can be placed into any part of the interface and readjust itself to the most optimal layout. That card now owns and dictates its own responsive logic. This is called intrinsic design and works a lot more naturally for component-based UI architectures. You can use Container Queries as an entry point to style anything from backgrounds to borders, but in this example, we're mostly shifting the layout and content visibility. If this card was in a more narrow area like a sidebar, it could get a vertical layout. If it's in this wider area, it gets a horizontal layout. And if it's in a thumbnail, it might get a completely different layout. Container queries are enabled by CSS Containment, so the first step in getting Container Queries to work is setting Containment on the parent elements. And since we're only looking at the inline direction for the width of this parent container, all we need to set is Container Type inline size on the parent. But just learn what is that thing next to the element in the Elements panel. That is the content of Bash, similar to the Grid and Flexbox Bash. It could help you identify the container element on the page quicker. Not only that, click the badge to toggle and overlay on the container and all its querying descendants. Over to you, Yuna. All right, let's take a look at the Container Queries declaration. Starting on mobile first, we hide the description of the card for a narrow area. When the card size exceeds 400 pixels, it gets a vertical layout with the description. Finally, when the card is in an even wider area, it gets a horizontal layout with the title on top and the image on the left. You can view and edit the container query in DevTools. When we increase the inline size from 400 to 500 pixels, the UI reflects the results immediately. The parent element of the query is shown above. Hover over it to view the current container size and highlight it on the screen. Finally, to view the parent element, click on the link and it will bring you to the parent element right away. Thanks, Yuna. How can we learn more about Container Queries? Well, for a start, you can check out some of the Container Queries episodes from Designing in the Browser. And to learn more about debugging Container Queries with DevTools, go to goo.gear-devtools-container-queries. That's all. See you for the next DevTools tip. Bye.