Circularity and Container Queries | Responsive Web Design

Circularity and Container Queries

This is fundamentally why it is taking so long to get to container queries. Aside from the recursion issue, it’s actually really expensive for the browser (from a performance/rendering point of view) to incorporate it at this point.

Diagram of how the browser handles container queries

Container queries alter a page’s layout conditionally — based on the page’s layout. In order to determine whether, say, a queried element is wider than 500px, we must first lay out the entire page. If we do — and the element is, say, 504px wide — our container query tells the browser to switch up some styles and re-layout some (maybe all) of the page, again.

An excerpt from Circularity and Container Queries

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.