An Interactive Guide to CSS Container Queries
Bored of the same old card demos for Container Queries and struggling to see where you’d use them in real projects? I was too until Ahmad Shadeed published yet another great guide.
Container queries are One Of Those Things™ that I was exceptionally excited about arriving and when they did, struggled to find a reason to use them. That’s partly down to the flexible layout systems I tend to champion, but also, I didn’t find myself in the same problems that a lot of the demos out there fixed.
Step up Ahmad though because he’s covered a lot of ground in this fantastic guide. He touches on an aspect I’ve been exploring recently for some heavy duty theming we’re prototyping for a client. It’s using style container queries to determine an disabled/enabled state like so:
@container configuration style(--cta-quotes: true) {
.cta q::before,
.cta q::after {
display: inline-block;
font-family: var(--font-base);
vertical-align: super;
position: relative;
transform: translateY(var(--cta-quote-vertical-offset, 0.1lh));
}
}
It’s super useful and also a great progressive enhancement thing. There’s loads more you can do with container queries too, so check out Ahmad’s guide for sure.