DEV Community

loading...

The future of Responsive Design with Container Queries.

Kim Hallberg
Freelance Web Developer πŸ‘¨β€πŸ’» Open-Source Contributor πŸš€
Originally published at devdojo.com on ・3 min read

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
}
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)