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.

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

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.