New way of declaring media queries

Are you still relying only on media queries for responsive design?

Let me show you another way…

…The CSS container queries!

Instead of adjusting elements based on the viewport, they adapt to the size of their container.

This makes your layouts more flexible, reusable, and predictable. It’s in general used for component-based design.

How it works:

• Define a container-name (acts as a reference).
• Set a container-type (to respond to width or height).
• Use @container to apply styles based on the container’s size.

With this new way, a new set of measurement units is introduced:

1. cqw: % of container width
2. cqh: % of container height
3. cqi: % of the inline dimension of the container
4. cqb: % of container block dimension
5. cqmin: the smaller value between cqi and cqb
6. cqmax: the larger value between cqi and cqb

With container queries, components resize based on their container, not the viewport.

This means they behave consistently across different layouts, making your designs more adaptable.

You also get more control over how elements react to their immediate environment.

And with 93% browser support, they’re ready for production.

<div class="container">
  <p class="resize">Some content</p>
</div>

.container {
  container: example / inline-size;
}

.resize {
  background-color: #065f46;
}

@container example (width < 20ch) {
  .resize {
    background-color: #fc5757;
  }
}

@container example (width > 30ch) {
  .resize {
    background-color: #27ae60;
  }
}

Codepen link: https://codepen.io/theosoti/pen/qBzybLP

Container queries are strongest when the same component appears in multiple layout slots. Defining behavior by container width, not viewport width, keeps modules reusable in sidebars, cards, and full-width sections.

Layout features like this provide real value when components move between narrow and wide containers. Testing nested contexts early prevents brittle breakpoint rules.

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!