Articles Tagged container-queries

Container queries don’t exist today but a lot of web developers have been arguing in their favor lately. At first, the idea sounds relatively simple: whereas media queries allow us to make style changes based on the width of the browser, container queries would allow us to make style updates when the width of an element’s parent changes.

That’s an important distinction to make and would likely solve a ton of daily problems for most web developers, especially those working … Read article “The Origin Story of Container Queries”

Container Queries, as in, the ability to style elements based on values from a particular element, like its width and height. We have media queries, but those are based on the viewport not individual elements. There are plenty of use cases for them. It’s been said before, but I’ll say it again, if container queries existed, the vast majority of media queries in CSS would actually be container queries.

Discussion about how to pull it off technologically gets … Read article “Responsive Components: a Solution to the Container Queries Problem”

I guess the plan is to stop with the “element queries” and start thinking and referring to them as “container queries”. We’ve been following this saga for a while. Element queries have a serious pitfall: infinite loops.

.our-element:media(min-width: 500px) {
  width: 499px;
}

As Responsive Issues Community Group member Mat Marquis puts it:

Well, since the query no longer matches, the new width is no longer applied. Since that new width is never applied, the element query would match again,

This is a perfect example of making a case for new language features. Not just a vague “element queries! that would be awesome!” but laying out a real-world scenario, what we have to do to achieve it now, and why that’s not ideal. Of course there are big challenges (see this and this) but those debates can be held elsewhere and not muddy the “why we need it” explanation.… Read article “Use Cases and Requirements for Element Queries”

Imagine something like these Transformer Tabs as a widget in a fluid column in a responsive design. Depending on the browser window width, perhaps this design is either 4, 2, or 1 column wide. When it breaks from 4 to 2, the column probably temporarily gets wider than it was, even though the screen is narrower. It would be preferable when writing the media query logic for those tabs to consider how much space the widget has available rather … Read article “Thoughts on Media Queries for Elements”

Width based media queries are based on the entire browser window. If the browser window is narrower than 800px, do this. If the browser is window is wider than 400px, do this. But that’s not always enough. Imagine a desktop 3-column layout at 1000px. Each column is 333px wide. Then you have a media query break at 800px which drops it to a 2-column layout, and with the third below. Even though the browser is now narrower, each column is … Read article “Responsive Elements”