Container queries

Media queries operate their queries on the capabilities of the device. Practically, when working with responsive designs, it's most commonly the width of the viewport we are interested in.However, there are occasions where the width of the viewport is not the ideal metric for making a style change.Suppose we are creating a visual component that might be used in a wider container, such as a main content area, but equally might be used in a thinner, sidebar aside area. These two contextual conditions for our component can exist at the same time. The viewport width would be the same, but the container our component finds itself in would be different. This is the problem that container queries solve. They allow us to make styles based on the container size, rather than the viewport size.Before we look at container queries in more depth, let’s consider what we did before them, not just to reminisce, but because container queries are a relatively new addition to...