What are container queries – will they change the way we design responsive pages?

What are container queries – will they change the way we design responsive pages?

Introduction

Container queries are queries that allow the styling of elements based on the width and height of their parent container instead of just relying only on the viewport dimensions.

Miriam Suzanne is the author of the proposal on container queries. Her website and codepen collection are very helpful resources to follow how this new feature is developed. Currently, the container queries are available only via Google Chrome Canary and only under the experimental flag.

The progress of layout and container queries approach vs media queries

Almost 12 years ago the concept of responsive design was introduced by Ethan Marcotte. The idea was centred around the possibility of setting different rules based on the size of the viewport using media queries. When smart mobile phones were introduced, developers were trying to find a way of working within the new world of mobile screen sizes together with desktop screen sizes.

For many years developers were solving the problem of the website layout based on the screen size by creating an additional site, for example, under the subdomain of “m”. Media queries and responsive design introduced many new layout solutions and further development of best practices around site responsiveness based on viewport size. Moreover, frameworks like Bootstrap were developed and became very popular due to their capabilities of providing responsive grid systems.

Component libraries and design systems became very popular in recent years and developers acquired a desire of building once and deploying to any device, therefore any independently developed component would work in any context, which would allow for complex systems to be more consistent and efficient.

Source: https://ishadeed.com/article/say-hello-to-css-container-queries/

Now, using only media queries, extra work needs to be done to control mutations of various components depending on the viewport changes. As mentioned before, the popular solution for imposing grid systems is by using responsive breakpoint utility classes, for example using frameworks like Bootstrap. But using these classes is more like a hack due to media queries limitations, and often leads to problems with nested grid layouts. Developers often try to resolve these problems by adding more breakpoint utility classes, but they may still not get the desired result. Using certain flex and grid behaviours to try to get closer to the desired container responsiveness also may not work due to grid and flex solution being restricted to loosely applying layout adjustments from vertical to horizontal arrangements without considering the need of modifications to other properties.

Container queries allow us to consider not just the viewport, but also any other element or component and respond according to the container size. Container queries allow developers to use responsive grid for the main layout, and control behaviour of a component within the grid by querying its parent container. Using this technique, styles of these components can be adjusted depending on the size (the width in most cases) of their parent container.

With container queries, we can query the block direction (vertical axe, height of the container).

Block-size is also being considered as a containment type in the new proposal. Inline-size seemed to satisfy more use-cases, so is being developed first.

CSS Containment context

The first thing we need to do is to change the containment context of the element.

The CSS containment property already exists in CSS. Containment types are size, layout, style and paint.

When we apply contain property to the element, this “box” and its children are now independent of the rest of the layout. They are not influencing the rest of the layout either. 

This is the way we create a new CSS containment for the element.

.container {
   contain: layout;
}

We can do better by using container-type property. It creates a containment context for this object. This also turns on layout, style, and inline-size containment in the same way as using the contain property does.

The inline-size value specifies that, in this case, queries will be made against the containing elements’ inline axis, and in the code later we will address the width of the container.

.container {
   container-type: inline-size;
}

We can add a name to a container using container-name property.

.container {
   container-type: inline-size;
   container-name: name;
}

The shortcut version in one line of code is also available.

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

Querying the container: the syntax

The syntax of the container query is very similar to media query. It starts with @ sign and mentions the width or height of the container at which the changes in the layout will apply.

@container container-name (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

Container queries and the future of responsive design

Many layouts and interfaces now are based on components that are repeated on the same page multiple times. Think of any social network or e-commerce website. The container queries are a great feature to build responsive components much easier than using just media queries and tons of scripting. These components can vary depending on their own size and not the size of a viewport. It’s better to use container queries for micro layouts on a more “local” level, while media queries are still used for more global transformation of the layout depending on the width of the screen.

It’s even possible to use containers inside the container. And it helps creating even more flexible layouts. We can use this approach to create responsive forms, page pagination, profile cards. Some of the possible use cases are shown in a very detailed article by  Ahmad Shadeed.
What a great future for building responsive web pages, isn’t it?

How to try container queries

It’s a new technology that works only in Chrome Canary and only under the experimental tag. To try it:

  1. Download Chrome Canary or update to the latest version
  2. Navigate to chrome://flags
  3. Search for “CSS container queries” and select “Enabled”
  4. Restart the browser
How to switch on the container queries in Chrome Canary

Here is a small demo page created using container queries.

This demo layout is a simple combination of cards that are styled the same way, but their layout is changing depending on the size of the card and the available space.

As the container property is experimental and works only with a class selector, we need to add a few classes to the markup.

First, we wrap the content inside a div that will be our outer container and give it a class of outer-container. The second container inside the container will be the main, so we added a main class to the main.

<div class="outer-container">
      <div class="inner-container">
        <main class="main">

Second, in the CSS file we add a containment context  and give names for both of our containers using a shortcut.

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

.main {
  width: 100%;
  container: inline-size/main-container;
}

And third – build the container queries that declare the change of styling depending on the min-width size of the container.

/* outer-container */
@container outer-container (min-width: 800px){
  .inner-container {
    grid-template-columns: 1fr 400px;
  }
  aside figure > img {
    padding-right: 0;
  }

 .main{
    border-right: solid 1px #706f6f;
  }
}

/* main-container */
@container main-container (min-width: 800px){
  .card {
    grid-template-columns: 1fr 2fr;
  }
  figure > img {
    padding-right: 2em;
  }
}

Conclusion

Container queries are relatively new, and the spec can change as it is still work-in-progress. It’s now on the side of the web community to try it, play with it and give feedback to the working group. It’s a powerful instrument to build robust and responsive designs, so fingers crossed that it will sooner or later be introduced as a working specification and be adapted by the browsers. The sooner – the better.

Resources:

Articles:

Videos:

  • 9elements. 2021. Miriam Suzanne – Container Queries & The Future of CSS. [online video] Available at: https://youtu.be/ilR9KlsHMGk [Accessed 11 February 2022].
  • Google Chrome Developers. 2021. Container queries – Designing in the Browser. [online video] Available at: https://youtu.be/gCNMyYr7F6w [Accessed 11 February 2022].
  • Kevin Powell. 2021. Container Queries are going to be a game changer! [online video] Available at: https://youtu.be/JsN_iE3prm0 [Accessed 11 February 2022].

Leave a Reply

Your email address will not be published.