CSS Container queries have been on the wish list of many a web developer for years now… finally they seem to be on the way. In Chrome Canary we can enable experimental CSS Container Queries and have a play with the proposed solution for this.
So similar to Media Queries the Container Queries provide us with a Width or Height but not for the entire viewport but rather the container of our component. The allows us to create components that are responsive relative to their actual container size.
For component creators this will be extremely benefical as though Media Queries are great they don’t quite provide the level of control needed to release a responsive component into the wild and be happy that it will just work in whatever situation it is placed into.
Until now the only was to implement this kind of feature was to use Javascript or some FlexBox or CSS Grid Hacks.
So the syntax for this is very much the same as Media Queries as below but with the @Container keyword.
@Container (min-width: 20ch) {
…
}
One of the main things holding this back has been performance issues. To this end we need to specify the container that will be the reference for measurements as below:
.container {
contain: layout inline-size
}
Some reference documents for this are below:
https://piccalil.li/blog/container-queries-are-actually-coming
https://dev.to/eddyvinck/why-i-think-the-upcoming-css-container-queries-are-game-changing-d4o
source