CSS container queries allows child elements to change their style depending on the parent container. It will be an additional support with the existing responsive web design.
CSS container queries
CSS container queries are a proposed feature in CSS that would allow you to apply styles based on the size or other properties of a container, rather than the viewport. You may check it’s support on caniuse page https://caniuse.com/css-container-queries before using it.
With container queries, you could define a set of styles for an element based on its parent container’s size. This would allow you to create responsive designs that adapt to the size of their containing elements, rather than the size of the entire viewport.
To use container queries in your CSS, you would use a new @container rule, which would allow you to define styles based on the size, orientation, or other properties of the containing element. For example, you might use @container to define a set of styles for a navigation menu based on the width of its container.
Here’s an example of how container queries might work:
@container (min-width: 1176px) {
.site-navigation {
display: flex;
flex-direction: row;
}
}
@container (max-width: 900px) {
.site-navigation {
display: block;
}
}
In this example, the .site-navigation element would be styled differently based on the width of its parent container. If the container was at least 1176 pixels wide, the navigation would be displayed as a row of items using flexbox. If the container was narrower than 900 pixels, the navigation would be displayed as a block of items.
Note that while container queries are a promising new feature in CSS, they are still in the experimental stage and may change in the future. You should also be aware that not all browsers support container queries yet, so you may need to use fallback styles or other techniques to provide a consistent experience for all users.