CSS Media Queries vs. Container Queries

Today’s web is built around components and that’s where media queries are lacking behind. We are going to see why in this article. But first, let’s cover the basics and start with a recap of media queries and the newer feature called container queries. Later we’ll jump into the benefits of container queries and when to use them or stick to the good old media queries.

Recap – What are Media Queries

Media queries are a CSS specification introduced with CSS3. The main idea behind media queries is to apply styles to an element based on the user agent or device the element is displayed. Common possible query values include but not limited to are: device type, orientation, and viewport [1].

Example

Let’s say we have three divs of different sizes and we want to change their color for each of our three breakpoints (small: 576px, medium: 640px, large: 768px). The following code would do the trick.

*resize the browser window

What are Container Queries

Container queries is a CSS specification introduced in late 2022. The main idea behind container queries is to apply styles to an element based on the size of the element’s container rather than the size of the viewport. You can listen to the properties and features of a container element. You can query the width but also custom properties [2].

Example

If we continue our example from the media queries recap section the only thing we need to change to turn the media query into a container query is to exchange @media with @container and add the line container-type: inline-size to the container class. The code now looks as follows:

*in the bottom right corner you can resize the div

As already mentioned container queries are based on the width of the element they are applied on rather than the viewport, so what happens is that all three divs now change their background color independently (according to their own width) even though we apply the same queries to all of them.

Container Types

As already mentioned, there are 2 different container types.

inline-size sets the size limit only on the inline axis. This means that the width or inline-size can be queried.
As a block-size option could not be implemented by the browsers, it does not exist. The alternative is the size option.

With the size option, the size restriction is defined on both dimensions. This means that the height, orientation, or aspect-ratio can also be queried.

However, it should be noted that side effects can occur with the size option. So be careful using this option.

Container Name

If you have several nested containers or simply want to ensure that your query uses the desired container, a container can be given a name to query it specifically.

When a container query is added, the nearest ancestor container is searched for by default. By adding a name, a specific container can be targeted.

It’s also possible to use a short version to describe the type and the name of a container.

Container Query Units

Container Queries come with their own units that work like the already-known new viewport units introduced in 2022:  75svw = 75cqw [3][4]
Example:

The key difference is, that the container query units are not relative to the viewport as long as they are inside a size container.

Example:

Overview about container query units:

Media Queries vs. Container Queries

We have now gained an overview of how and when media queries and container queries can be used in simple examples. Now let’s look at one more example that is closer to the real world. So let’s jump right in.

• real world example with explanation (media vs container)

Key takeaways