An Interactive Guide to CSS Container Queries

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:

Code languagecss

@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.

Check it out

Newsletter