Brikena's Blog

Web Design and Content Planning

CSS Container Queries

Introduction
Before starting with container queries, context about responsive design and the approach most
designers have taken until this moment should be explored. Responsive design takes the webpage as
a whole, and based on the size of the viewport media queries, these are used to declare rules to
adjust the elements of the design accordingly. This method has been used for a long time and has
proven to be very useful. However there are some fallbacks because there are elements to the
design that don’t have to change when the viewport changes. However with media queries, we are
forced to set rules even for elements that don’t change. The most popular approach taken by web
designers is to separate the whole design into small bits of design, for example: footer, image
caption, header. Here, each section acts as an individual pattern with their own sets of breakpoints.
This is why the introduction of container queries can be so useful, and promising for the future of
web design, of course without excluding the usefulness of media queries. After all media queries
have been used for a long time and have made responsive design possible.

Media Queries
One of the easiest ways to understand container queries is by comparing them with media queries.
This can help designers to understand them better, another useful resource is a video by Kevin Powell
on his YouTube channel where he explains the difference between media queries and container
queries in a very easy to understand format.

Therefore, to start with, it will be useful to explore media queries and how they are used.

Figure.1 demonstrates how elements in media queries are queried based on the viewport size. In this
case from a full view port, where three elements are aligned. As the viewport gets smaller there are
two elements in the top row, but all the while these elements remain the same. But what happens
with container queries, and how is it different?

Figure 1 CSS container queries are finally here –
.https://ishadeed.com/article/container-queries-are-finally-here/
Figure 2 CSS container queries are finally here – Ahmad
Shadeed (ishadeed.com) reference to Ahmad Shadeed
article on container queries.

In the second figure it is demonstrated how container queries work. CSS styles are applied based on
the space in the container, say container width rather than the size of the viewport. So when the
container width expands the elements of the container are aligned, then as the container expands
further, the size of the elements expands as well. So this means that we can now address elements of
the design or the layout individually to adjust as the width of each container element changes.

What are container queries used for?
As explained earlier, designing websites has a slightly different approach now which involves
designing small patterns rather than whole pages. This makes it easier to design more complex
layouts with many elements and components such as grids, navigation menus or tables where the
behavior may need to change based on the space in the container itself. As explained earlier, it is
simpler to separate the design so that each section can have a set of rules for responsiveness in
various devices. In this way we can make more precise styling and sometimes avoid the use of many
complex elements and sometimes the use of many classes that are needed to target specific
elements in media queries.

Container queries are specifically beneficial because:
1. They allow developers and designers to design websites with more flexibility and control.
2. They enable designers to create responsive designs that adjust to the size of the container
elements.
3. Unlike media queries that are based on the viewport size, container queries operate based
on the size of the container element.
4. Container queries can help to avoid CSS specific issues by allowing developers to target
specific elements.
5. Container queries can improve performance and reduce file size since they reduce the need
for media query repetition on multiple pages.

6. They can make it easier for developers and designers to maintain and update a site since the
changes to one container query will affect all the elements within the container.

How do we use container queries?
In order to use container queries we need to declare an element as a containment context. This way
the browser knows that you might want to query the dimensions of this container later on in the
design.
This section explains the steps from an exercise made with a reference to the Kevin Powell video.
So, the first step is to declare a containment context in one of the elements. In this case the elements
that we want to declare as elements are the three containers; narrow-container, medium-container
and wide container as seen in Figure 3. To declare a containment context in the element we use the
container-type property as shown in Figure 4. Now that the containers have been declared, we can
see that all the three containers are already containers using the inspect development tools in our
browser as shown in Figure 5.

Figure 3 demonstration example html
Figure 4 declaring container-type in
CSS.
Figure 5 Using development tools to inspect the containers after declaring container type in CSS.

When declaring the container-type property we can give three different values to the property which
are size, inline size, or normal. Each of these sizes has different effects:
Size:
The query will be based on the inline and block dimensions of the container. It applies layout, style
and size containment to the container.
Inline-size:
The query will be based on the inline dimensions of the container. It applies layout, style and
inline-size containment to the element.
Normal:
The element is not a query container for any container size queries, but remains a query container
for container style queries.


The next step is to use the @container at-rule to define a container query as shown in Figure 7. A
container query will apply styles to an element based on the size of the nearest ancestor with a
containment context. In this case when the size of the container exceeds 375px change the
background of the paragraph of that container to electric green #00ff00. By using container queries
this element can be used in multiple areas of a page without needing to specifically know where it
will be placed each time. If the size of the container is narrower than 375px the background colour
will be in this case blue but if it exceeds 375px then it will be green.

Figure 6 Declaring a container at-rule.

When coding container queries there are many possibilities that allow us to be even more specific
when designing a website. The naming property is one of the syntaxes that allows developers to
target different containers specifically. To name a containment context we use the container-name
property and in the moment that we declare the property we can then use it in a @container query
to target the specific container. Combined with other CSS selectors, specific elements can be targeted
within that container.

Another part that container queries provide us with are the container query length units that can be
used when applying styles to a container using query containers. The units that are going to be
mentioned below specify a length that is relative to the dimensions of the query container. Most
used units are the ones that are relative to their container because of the flexibility to use in other
containers because it removes the need to have to calculate precise length values.

1. Cqw which equals 1% of a container’s width.
2. Cqh equal to 1% of the container’s height.
3. Cqi equal to 1% of the container’s inline width.
4. Cqb equal to 1% of the container’s block width.

An important note to consider is that when using container queries the length units should be
chosen carefully depending on the context of the layout and the content of the containers. For
example using fixed pixel values might be fine for a certain container size, but might look
awkward or break the layout when the container size changes. As mentioned above this is why
relative units are most used because they make the design more flexible and adaptable to
different container sizes.

Fallbacks for container queries
Research shows that container queries have a wide range of browser support, but not full
support. When using container queries for the example used for demonstration in our seminar,
we noticed that it is supported by the browser but when working in the code editor it seemed
that it didn’t work because the colours wouldn’t change as you can notice from Figure 4 and
Figure 6. Therefore we can learn from this experience that we can use container queries in some
projects but of course they wouldn’t yet substitute media queries. This is why fallbacks are still
necessary to ensure that our projects are responsive in every user’s browser. For fallback options,
the simplest and the best way is to use media queries. The long-term relationship between responsive design and media queries is yet to be continued at least until container queries are natively supported in all browsers.

Conclusion
Container queries are a newly proposed CSS feature that gives developers the opportunity to work with responsive design in a more simple way than what they are used to until now. Of course, as with any new feature in development container queries have been highly anticipated and are finally usable. However, more time is needed until container queries can be used as much as media queries. From the examples that are shown, it is clear that container queries significantly simplify working with responsive design. These very simple examples help gain an understanding in essence of the problems that container queries solve.

Another useful aspect of container queries is that they make working with responsive design a
lot less complicated because you are targeting specific elements rather than targeting the whole
page and making the necessary adjustments as the device size changes.

It is a lot easier breaking the design into elements and working with the element’s size and space
as the width or size of the container changes.

As container queries work with other CSS properties, the first step is to make sure that the html
code is lean and semantic which will make it much easier to select and give a containment
context to the right elements. Then we can apply rules and style to the containers that fit
properly with our design, all the while maintaining a simple and understandable CSS code rather
than a complicated one especially when working with very complicated and complex layouts and
components.

References
1. MDN web docs – CSS Container Queries – CSS: Cascading Style Sheets | MDN (mozilla.org)
2. Ethan Marcotte article: On container queries – On container queries. — Ethan Marcotte
3. Ahmad Shadeed article: CSS container queries are finally here – CSS container queries are
finally here – Ahmad Shadeed (ishadeed.com)

4. Kevin Powell video: Container Queries are going to change how we make layouts.