New layout features in the new era -- container query

Finally, after a long wait, CSS Container Queries will be officially supported in Chrome 105!

At present, we can also enable the Enable CSS Container Queries feature in the Chrome Canary version, or in Chrome 93~104.

Responsive past pain points

In the past, responsiveness had such a handicap. If you want to change different layout forms of the same DOM, you need to rely on media queries to achieve it.

Like this:

By changing the size of the browser window and using media queries, different layouts can be achieved.

However, nowadays, most PC-side pages use Flex/Grid-based flexible layouts.

In many cases, when the number of content is uncertain, the layout and width of elements may be inconsistent even under the same browser window width.

Consider the following situation:

 <!-- 情况一  -->
<ul class="wrap">
    <li></li>
    <li></li>
    <li></li>
</ul>
<!-- 情况二  -->
<ul class="wrap">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

 .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
li {
    width: 190px;
    height: 100px;
    flex-grow: 1;
    flex-shrink: 0;
}

In this case, if you need to process the last element with different widths, the traditional method is still more troublesome.

In this case, CSS Container Queries came into being!

Container query capabilities

Container query It gives CSS the ability to adjust the layout according to the width of the container without changing the width of the browser's viewport.

Still the above example, simple code indication:

 <div class="wrap">
    <div class="g-container">
        <div class="child">Title</div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p>
    </div>
</div>

 .wrap {
    width: 500px;
    resize: horizontal;
    overflow: auto;
}
.g-container {
    display: flex;
    flex-wrap: nowrap;
}
.wrap {
    /* CSS CONTAINER */
    container-name: wrap;
    container-type: inline-size;
}
@container wrap (max-width: 400px) {
    .g-container {
        flex-wrap: wrap;
        flex-direction: column;
    }
}

Like this, we simulate the width change of a single container by resize: horizontal , in this case, the container query can change the layout inside the container at different widths.

In this way, a container query function is simply implemented:

Note, carefully compared with the above example, here, the browser's viewport width does not change, only the container width changes!

The similarities and differences between media queries and container queries can be seen through a simple diagram. The core point is that when the width of the container changes, the width of the viewport does not necessarily change:

We simply disassemble the above code, which is very easy to understand.

1. In the style of .warp container-name: wrap , register a container with ---7c9d4ccb73b5e8d8f2a72f98deaf88ac---
2. After registering the container, you can use the @container wrap () container query syntax to write another set of styles in different situations internally.
3. Here @container wrap (max-width: 400px) {} means that when .wrap the width of the container is less than 400 px, the internally defined style is used, otherwise, the external default style is used

For the more specific syntax of container queries, I suggest you go to MDN or the specification to see in detail -- MDN -- CSS Container Queries

Some thoughts on container queries

After seeing this syntax for the first time, the first scenario that comes to my mind is the adaptive size of fonts.

Let's look at such a scene. Many times, we can't estimate the amount of copy content. Therefore, it is desirable to have a smaller font when there is a lot of content, and a larger font when the content is less than one line or very little:

CodePen Demo -- Container Quries Demo

Of course, at this stage, I haven't tried it yet. In the container query, the width of the container can dynamically change the size of the container with the change of the input. There are some flaws here, and it is a point that needs to be further studied.

Of course, in those scenarios where different widths can be known in advance and different layouts can be preset, container queries are very useful.

We can use it to quickly build different behaviors for different widths of the container .

For example, such a DEMO:

CodePen Demo -- CSS Container Queries

In general, container query is still in the early stages of development, and many interesting usages remain to be discovered. But it does count as one of the biggest innovations in CSS this year.

at last

Well, this is the end of this article, I hope this article will help you :)

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.