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 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.
2. Go to chrome://flags in the URL bar.
3. Search for “CSS Container Queries”, enable the feature.
4. Restart the browser.

Miriam, the author of the proposal has a put together a CodePen collection of Container Queries demos for your testing pleasure. For more information on Container Queries, I recommend reading Container Queries Explainer & Proposal 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.

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.

@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 talk; The new responsive: Web design in a component-driven world.

Kevin Powell video; Container Queries are going to be a game changer! and, of course. Take a peek at the proposal itself.