4 ms·

Interesting to see this, as I feel like I've seen arguments against this kind of state-based querying come up to avoid cases where you end up with an infinite l

Interesting to see this, as I feel like I've seen arguments against this kind of state-based querying come up to avoid cases where you end up with an infinite loop of state query applying -> new styles applying -> new styles undo the state -> state query not applying -> styles removed -> original state query applying, repeat indefinitely. I believe this was the rationale for not having pseudo states for when a container is scrollable, for instance. I wonder what they've done to avoid these cases. For instance, in their `state(wrap: true)` example, now that the wrapping element is hidden, isn't it no longer wrapping? Why does the query continue to apply?

kristiandupont 3y ago
Good point. I think container queries are cool and intuitively useful, much more so than queries based on what the browser window size happens to be. These are not nearly as obvious to me. I get the nav bar scenario, but I think I find the quest for "CSS purity" where any design, no matter how dynamic, can be expressed without Javascript seems a bit silly. I have no problem with it, I just also don't think it's quite as noble as some seem to think.
- alwillis 3y ago
  > I get the nav bar scenario, but I think I find the quest for "CSS purity" where any design, no matter how dynamic, can be expressed without Javascript seems a bit silly. I have no problem with it, I just also don't think it's quite as noble as some seem to think. I think you're missing the point. Adding functionality to CSS makes is mostly about separation of concerns and making desired features accessible to a wider audience than just JavaScript programmers. And while a good programmer can do a lot with JavaScript, all of the machinery for layout—flex box, grid, container queries—is in CSS, so it makes sense to build on that.
wokwokwok 3y ago
Yes, it seems recursive and I don’t like it. You can wave your hands around as much as you like but fundamentally this state based rule stuff says: - apply styles - now, query the current state - based on the current state, apply different styles I understand there are complex interactions that people want to cater for like sticky headers, but… really? There’s only so far you can bandaid a declarative language like css. If you want dynamic behaviour, use javascript. That’s why it exists.

kristiandupont 3y ago

Good point. I think container queries are cool and intuitively useful, much more so than queries based on what the browser window size happens to be. These are not nearly as obvious to me. I get the nav bar scenario, but I think I find the quest for "CSS purity" where any design, no matter how dynamic, can be expressed without Javascript seems a bit silly. I have no problem with it, I just also don't think it's quite as noble as some seem to think.

alwillis 3y ago
> I get the nav bar scenario, but I think I find the quest for "CSS purity" where any design, no matter how dynamic, can be expressed without Javascript seems a bit silly. I have no problem with it, I just also don't think it's quite as noble as some seem to think. I think you're missing the point. Adding functionality to CSS makes is mostly about separation of concerns and making desired features accessible to a wider audience than just JavaScript programmers. And while a good programmer can do a lot with JavaScript, all of the machinery for layout—flex box, grid, container queries—is in CSS, so it makes sense to build on that.

wokwokwok 3y ago

Yes, it seems recursive and I don’t like it. You can wave your hands around as much as you like but fundamentally this state based rule stuff says: - apply styles - now, query the current state - based on the current state, apply different styles I understand there are complex interactions that people want to cater for like sticky headers, but… really? There’s only so far you can bandaid a declarative language like css. If you want dynamic behaviour, use javascript. That’s why it exists.