Support and Future of Container Queries

We hope you’re excited about container queries. The good news is we can start using them today! As noted earlier, size container query support is already available in evergreen browsers.

Google Chrome labs developed a container queries polyfill that covers the essential uses and extends support back to these browsers:

• Firefox 69+

• Chrome 79+

• Edge 79+

• Safari 13.4+

Note: The polyfill doesn’t support style queries.

The future of container queries

The age of container queries has arrived! Although we’ve reviewed a variety of use cases in this tutorial, there are many unexplored ways to use them.

Experimentation is useful not only for personal learning but also for influencing the specification and helping to report issues.

The style query feature will likely lead to extremely creative and useful solutions in CSS. We’ll see very smart uses for container-relative units. As our collective understanding of container queries evolves, they’ll make their way into current and future frameworks, libraries, and design systems.

A related feature that’s been released alongside container queries is media query range syntax. This enables the use of math operators within both standard viewport media queries and container queries. Range syntax is also required when using logical syntax for container queries ( inline-size and block-size ):