Container Queries: Do we still need Media Queries?

Nothing excites me more than container queries are no longer behind an experimental flag on Chrome Canary and are now available on three major browser engines. Thanks to Miriam Suzanne and the team for the efforts to bring us the ability to change the style of an element based on the size of its nearest containers.

Container queries empower us to precisely and predictably define a component’s entire spectrum of styles. Whether you intend to adjust padding, modify font sizes, change background images, or entirely transform the child element’s display properties and orientations, container queries offer this level of control.

What happened with media queries?

Over a decade ago we were introduced to responsive web design with the media query as the technique to achieve a responsive web design. But recently Ethan who creates the term responsive web design has stated that:

Can we consider a flexible layout to be “responsive” if it doesn’t use any media queries, but only uses container queries? […] I’d be inclined to answer: yes, absolutely.

Ethan Marcotte — Responsive design and container queries? Oh my!

There are cases where responsive web design is not about the viewport or the screen size but it’s about the container size. Container queries allow us to interrogate the styling attributes of a parent element, such as its inline-size. Unlike media queries, which query the viewport’s dimensions, container queries empower components to adapt dynamically based on their position within the UI.

Difference between container queries and media queries

Container queries are very suitable for component-driven design as they allow us to provide components with intrinsic styles, enabling them to automatically adjust to their surroundings, regardless of where they are positioned.

Using container queries

In order to use a container query, first we need to declare a containment context on the parent element using container-type or container as a shortcut to give both name and type on the fly.

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

inline-size as the container-type means only to respond to the parent’s width changes. While we’re also set the container-name as card .

Then in this demo we will set @container to tell the component that if its direct parent width is greater than 400px, then it needs to switch to the horizontal style instead of card style.

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

.card-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@container (max-width: 400px) {
  .card-wrapper {
    grid-template-columns: 1fr; //this will make the card horizontal
  }
}

Here’s the video result of the card component that use container queries.

Card example using container queries

Similar to viewport-based unit values, we can utilize the used of container query length unit values. The difference is that container units are relative to the container rather than the viewport. The example above illustrates responsive typography through the utilization of container query units and the clamp() function to give both minimum and maximum size values:

.card-wrapper h1 {
  font-size: clamp(1.5rem, 7cqi, 4rem);
}

The 7cqi above refers to 7% of the container’s inline size. The clamp() function gives this a minimum value of 1.5rem, and a maximum of 4rem. Otherwise, if 7cqi is between these values, text will shrink and grow correspondingly.

Do we still need Media Queries?

Container queries are a great way to design more flexible and responsive layouts without having to use fixed breakpoints, having said that, combination of container queries and media queries technique will be one of the best way forward to achieve a great responsive web design. @media can handle the big picture stuff, user preferences and global styles; @container will take care of all the micro-adjustments inside the components.

Conclusion

As we can see on the above example and explanation that the presence of container queries will help frontend engineers in order to make a responsive yet beautiful layout along with the combination of media queries as well.

Let us know how do you utilize container queries in your project and stay tuned on Gravel Engineering as we will write more on other Web APIs and the latest advancements in Web Technologies.

Happy coding!