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.
- Download Chrome Canary.
- Go to
chrome://flagsin the URL bar. - Search for “CSS Container Queries”, enable the feature.
- 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.
View Website
View Website
View Website
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.
Comments (0)