CSS @container Queries

As the topics about CSS are discussed, we get excited too :) Very good topics are discussed, such as nesting, parent selector, etc. @container queries are currently an experimental added feature in the Chrome Canary version.

@container is a query structure that works just like @media queries.

What is the difference between @media and @container?

@media queries are based on the viewport value, while @container queries are based on the container's value, as you can imagine. This of course brings some advantages.

For what purpose can it be used?

This is actually a query we can use to monitor a container and apply different styling operations based on its width or height. It allows us to take a more personal approach rather than @media.

Let me give you an example to understand better. Have two main structures that you call sidebar and main. And let's say you have prepared a user widget. You want this widget to appear correctly no matter where it is placed. Technically, since the sidebar area will be smaller, some areas of the widget should be hidden, since the main area will be larger, some invisible areas will be highlighted in the widget.

How can you do this? There is no simple way, unless you are using @container queries :)

Let your HTML structure be like this

<div class="wrapper">
  <aside class="sidebar">
    <div class="widget">
      widget
    </div>
  </aside>
  <main class="main">
    <div class="widget">
      widget
    </div>
  </main>
</div>

The important thing here is that the sidebar and main fields contain: layout inline-size; containing the value. After this happens, we will apply different style operations for the widgets when the width changes with @container queries. Namely;

* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
.wrapper {
  display: flex;
}
.sidebar {
  width: 300px;
  min-width: 300px;
  contain: layout inline-size;
}
.main {
  flex: 1;
  padding: 15px;
  contain: layout inline-size;
}
.widget {
  background: purple;
  color: #fff;
}

@container(max-width: 600px){
  .widget {
    background: darkorange;
  }
}

@container (max-width: 300px){
  .widget {
     background: green;
  }
}

Yes, if the width is less than or equal to 300px in the main or sidebar areas, the widget background will be green, if it is less than or equal to 600px and larger than 300px, the widget area will be darkorange. If it is larger than 600px, the widget area will be purple.

In other words, in this logic, what we will write in @container (max-width: 300px) is about what happens when the widget appears in the sidebar area. According to the example above, maybe some elements can be hidden, font sizes can be reduced, etc.

@container(max-width: 600px) is an area where we can write css for a slightly larger area than the sidebar, although not completely.

As a result

I do not know when it will be accepted as a standard, but I am sure that if it does, it will attract great attention and be used in many useful areas.

Maybe there will be minor changes in its usage when it becomes a standard, but I don't think there will be a change in general. How did you find it, are there any places you will use it?