Future of CSS - Container Query
Tags: css, webdev, beginners, codenewbie
Published: 2021-06-03 08:37:07


<p><span class='first-letter'>A</span> web page consists of different sections and components, and we make them responsive by using CSS media queries. There is nothing wrong with that, but it has limitations.</p>

To use container queries we have to tell the container (the parent of the element we want to apply the query to) that we care about its dimensions, we do this with the new contain property.

## CSS Containment 🔥

```html
<h1>My blog</h1>
<section>
  <h2>Heading of a nice section</h2>
  <p>Content here.</p>
</section>
<section>
  <h2>Another heading of another section</h2>
  <p>More content here.</p>
</section>
```

```css
section {
  contain: content;
}
```

1. **none**

    Indicates the element renders as normal, with no containment applied.

2. **strict**

    Indicates that all containment rules except style are applied to the element. This is equivalent to `contain: size layout paint`.

3. **content**

    If we give each `<section>` the contain property with a value of content, when new elements are inserted the browser understands it does not need to relayout or repaint any area outside of the containing element's subtree, although if the `<section>` is styled such that its size depends on its contents (e.g. with height: auto), then the browser may need to account for its size changing).

    The `content` value is shorthand for `contain: layout paint` .

    It tells the browser that the internal layout of the element is totally separate from the rest of the page, and that everything about the element is painted inside its bounds.

4. **size**

    It does not offer much in the way of performance optimizations when used on its own.

    If you turn on contain: size you need to also specify the size of the element you have applied this to. It will end up being zero-sized in most cases, if you don't manually give it a size.

5. **layout**

    Indicates that nothing outside the element may affect its internal layout and vice versa.

6. **style**

    Indicates that, for properties that can have effects on more than just an element and its descendants, those effects don't escape the containing element. Note that this value is marked "at-risk" in the spec and may not be supported everywhere.

7. **paint**

    Indicates that descendants of the element don't display outside its bounds. If the containing box is offscreen, the browser does not need to paint its contained elements — these must also be offscreen as they are contained completely by that box. And if a descendant overflows the containing element's bounds, then that descendant will be clipped to the containing element's border-box.

When we use media queries, most of the time we care about the available width (or **inline-size**).

**NOTE**: You can <LinkPost href="https://drafts.csswg.org/css-contain-3/" name="review the draft document" /> which will update as the spec is formed.

### What problem do container queries solve? 🤔

When creating a responsive design you often use a media query to change the document layout based on the size of the viewport. Media queries give us the ability to size things based on ranges.

Instead of looking at the viewport size, we can look at the container size and make our layout adjustments according to the space in the container.

You need to install <a href="https://www.google.com/intl/en/chrome/canary/">Google Chrome Canary</a> to run this feature. Once you’ve activated the feature in <mark>chrome://flags</mark> and enable it. Then a restart chrome canary will be needed.

<img src="https://i.imgur.com/N6OOX7G.png" alt="CSS Google chrome canary" />

Now, you can then begin to write code like this:

```css
.parent {
  contain: layout inline-size;
}

@container (min-width: 400px) {
  .child {
    display: flex;
    flex-wrap: wrap;
  }
}
```

Checkout this Codepen for how it works 👇

{% codepen https://codepen.io/suprabhasupi/pen/QWpQrqP %}

## Browser Support 🌐
Support for `container query` is not good at this moment!

<img src="https://i.imgur.com/KtAW5hg.png" alt="CSS container query browser support" />

## Community Input 👭

<a href="https://ishadeed.com/article/say-hello-to-css-container-queries/">Container Query By Ahmad Shadeed</a>

## Reference 🧐

- <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment">CSS Containment</a>
- <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries">CSS Container Query</a>
- <a href="https://caniuse.com/css-container-queries">Can I Use CSS Container Queries</a>


<a href="https://www.buymeacoffee.com/suprabhasupi" target="_blank"><img src="https://i.imgur.com/4t25pJE.png" alt="Buy Me A Coffee" /></a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>