Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts. Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics.
This feature is now stable across browsers.
Warning
This feature landed in browsers in the beginning of 2023. According to our support policy this will become generally usable starting April 2025.
Below is the example from the linked MDN web docs:
<div class="post">
<div class="card">
<h2>Card title</h2>
<p>Card content</p>
</div>
</div>
.post {
container-type: inline-size;
}
/* Default heading styles for the card title */
.card h2 {
font-size: 1em;
}
/* If the container is larger than 700px */
@container (min-width: 700px) {
.card h2 {
font-size: 2em;
}
}
Further reading:
This article Show archive.org snapshot has plenty more examples and use cases.
Posted by Emanuel to makandra dev (2023-03-16 08:21)