CSS Container Query Syntax Update 2022: container-type
Tags: webdev, css, news, tutorial
Published: 2022-08-30 10:49:00

Now that the latest [Chrome / Chromium browsers added support for CSS container queries](https://developer.chrome.com/blog/has-with-cq-m105/) 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](https://una.im) for suggesting to update my [CSS container queries example](https://dev.to/ingosteinke/a-css-container-queries-example-1le0) here on The Practical DEV which had been inspired by Heydon Pickering's "Holy Albatross".

{% post https://dev.to/ingosteinke/a-css-container-queries-example-1le0 %}

## 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.

![Screenshot of legacy code as explained in the following paragraph.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cdwi7e5ijbkcj5jlai8.png)

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:

```css
.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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries#container-type_2) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries#container-type_2) 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`.