Google is preparing to test CSS container queries for Chrome and Chromium. As a Chromium feature, container queries will come to other Chromium-based browsers including Microsoft Edge.

The Chrome team has added a new experimental flag to test this feature. I am hoping to see this in the next update to the Canary channel.

What is CSS Container Query?

Container Queries allow authors to style elements according to the size of a container element. It is similar to a @media query, except it evaluates against the size of a container instead of the size of the viewport. (Source: chromestatus.com)

You can read the original proposal for @container query here on Github. Chrome’s implementation will be based on this variation of the same request.

“CSS authors want a way to use a feature like media queries on a part of the page. Many of the use cases underlying this desire relate to things that are component-like, that is, pieces of a web page that might be used in different webpages. Authors wish to construct a component whose appearance responds to its size, but they want this component to be a part of the webpage that contains it.”

How to Enable @container Query

The feature request bug for the container query feature has more than 100 votes. As this feature is mainly useful to developers, it is safe to say that this is a VERY popular feature request.

If you are a web developer waiting for an opportunity to test @container query, download the latest version of Google Chrome Canary and look for the following flag:

“Enable CSS Container Queries: Enables support for @container, inline-size, and block-size values for the contain property and the LayoutNG Grid implementation.”

This flag is now available in the latest version of Google Chrome – Canary Channel.

Soruce: Chromium Gerrit.