CSS Container Query Syntax Update 2022: container-type

Now that the latest Chrome / Chromium browsers added support for CSS container queries without experimental flags, it is time for early adopters to review our existing code and update the syntax according to the current best practice.

Thanks to Una for suggesting to update my CSS container queries example here on The Practical DEV which had been inspired by Heydon Pickering's "Holy Albatross".

A CSS container queries example

Ingo Steinke ・ Jan 11 '22

#css #webdev #webdesign #todayilearned

How to Update Legacy Container Queries Code

Take this code written to work with the experimental container queries implementation in 2021. I will not use a code block so nobody can copy and paste the wrong code mistakenly.

Even without updating or extending Stylelint we are lucky that WebStorm/PhpStorm does not like our experimental contain declaration which already looked hacky and unintuitive in the first place. So let's forget about the verbose style and layout values and use the new container-type property to specify that our containment should be based on inline-size.

Container-Type obsoletes the Contain Property

So here is updated code:

.container {
    container-type: inline-size; /* obsoletes contain: */
}

@container (max-width: 640px) {
    .container > * {
        flex-basis: 100%;
    }
}

That's all we have to do.

But let's proceed one step beyond the necessary changes to understand the new container-type property.

Understanding the Container-Type Property

MDN informs us that

The container-type property can have the following values:
size, inline-size, block-size, style, state.

But what do these container-type values do?

inline-size

As used in our example, inline-size establishes a query container for dimensional queries on the inline axis of the container. Applies layout, style, and inline-size containment to the element.

This seems to be a typical use case for layout that can have one or more columns depending on the horizontal width available based on a real-world flexbox example. And if I understand correctly, just like we can use generic style properties like flex-start or margin-block-start to make our designs more independent from writing modes (directions of text flow), the inline axis does not necessarily have to be the horizontal width axis in any case so we prefer to use more generic names.

size

The size value adds support for the block axis.

block-size

While block-size only works with the block axis, but not the inline axis.

style and state

Last but not least, both style and state sound so generic that even MDN leaves all the details to our imagination at the time of writing, so we don't care either now.

Obsolete properties

In older, experimental container query implementations (using contain: instead of container-type) we needed more verbose settings, but we can forget about this now as container queries have reached stable browser support without experimental feature flags in 2022.

So we don't need to define the containment for layout anymore to enable container queries, neither do we need any style to prevent dynamic style calculation causing infinite loops. Both is implicitly handled correctly using container-type.