The future of Responsive Design with Container Queries.
Tags: css, experimental, responsive, mediaqueries
Published: 2021-05-23 14:59:52

---
title: The future of Responsive Design with Container Queries.
published: true
date: 2021-05-22 09:42:56 UTC
tags: css,experimental,responsive,mediaqueries
canonical_url: https://devdojo.com/thinkverse/the-future-of-responsive-design-with-container-queries
---

When we write responsive design using CSS today, we use the `media` at-rule, more commonly known as a _Media Query_. This at-rule queries the device or user-agent to grab the values it needs for our media condition. That condition can be a multitude of conditions based on the provided media type or media feature.

One thing that `media` cannot do sadly, is query DOM elements directly. This is where the `container` at-rule proposal from [Miriam Suzanne](https://www.miriamsuzanne.com/who/) comes in. A new at-rule specification that is currently being proposed, affectionately called _Container Query Proposal_.

The TL:DR; version of this proposal is to query an elements parent container for context based dimensions instead of the viewport dimensions. For instance if the parent container has a `min-width: n` do the following.

### How to test the new at-rule.

Currently, there is only one browser that has released a prototype for the proposed specification and that is Chrome. Available in their nightly build - Chrome Canary, under the flag _“CSS Container Queries”_. Here are the steps on how to enable the flag.

1. Download [Chrome Canary](https://www.google.com/chrome/canary/).
2. Go to `chrome://flags` in the URL bar.
3. Search for _“CSS Container Queries”_, enable the feature.
4. Restart the browser.

[Miriam](https://www.miriamsuzanne.com/who/), the author of the proposal has a put together a [CodePen collection](https://codepen.io/collection/XQrgJo) of _Container Queries_ demos for your testing pleasure. For more information on  _Container Queries_, I recommend reading [Container Queries Explainer & Proposal](https://www.miriamsuzanne.com/2021/05/02/container-queries/) also written by the proposals author.

### Creating a Container.

To make _Container Queries_ work, we need to have a `container` available to query. That is done by creating a `container`. For that we use the CSS `contain` property along with the `layout` and `size` values.

```css
selector {
	contain: layout inline-size;
}
```

The `size` value `inline-size` uses the inline-axis on the container. A quick note here, there is a `block-size` in the prosposal. That is currently **not available** in the Chrome prototype, there is still a discussion if this axis is even needed so keep that in mind.

### Writing Container Queries.

With a new `container` established, we can now query for it using the `container` at-rule.

```css
@container (<container-query-list>) {
	<stylesheet>
}
```

That is the proposed syntax, similar to `@media` except it uses `@container` instead. Your `<container-query-list>` uses queries based on the `containment context` i.e `min-width`, `max-width`, `width` etc, similar to _Media Queries_.

The `<stylesheet>` will now be responsive to the nearest ancestor container  if finds.

```
@container (min-width: n) {
	selector {
		display: none;
	}
}
```

The above example for instance, will set the `display` to `none` for the given `selector`, when it finds an ancestor container that matched the provided _Container Query_ `min-width` of `n`.

### More examples.

That will be our brief overview of the _Container Query Proposal_. For more examples of _Container Queries_, I recommend watching [Una Kravets](https://twitter.com/una) talk; [The new responsive: Web design in a component-driven world](https://web.dev/new-responsive/).

[Kevin Powell](https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw) video; [Container Queries are going to be a game changer!](https://www.youtube.com/watch?v=JsN_iE3prm0) and, of course. Take a peek at the [proposal](https://github.com/w3c/csswg-drafts/issues/5796) itself.