Re: [csswg-drafts] [css-contain-3] Multiple <container-query>s with multiple containers (#6876)

First, to address some of the side issues:

- Container queries work because we explicitly disallow self-queries. By insisting that the query target is always an ancestor of the selected element, we avoid potential for loops. So I think that aspect ("i.e. self") is off the table, but not required for the rest of your proposal.
- Some of the questions here depend on (and expand on) the questions about implicit container-selection in #6644. If we want implicit selection, and we want to allow multiple containers, the two need to work together.

But to focus in on the primary questions here: 

## 1. Is it possible for one element to query multiple containers? 

While we haven't written nesting in explicitly, I would expect nested queries to allow this already based on the current spec. Each `@container` rule would handle container-selection internally, potentially selecting different containers, and the styles would only apply if all container queries resolve `true`:

```css
@container size-wrapper size(inline-size > 30em) { 
  @container style-wrapper style(--responsive = true) {
    .child { /* styles based on two different containers */ }
  }
}
```

Which simplifies this issue a bit more, down to just solving:

## 2. Do we want to allow that in a single `@container` rule without nesting?

I like the idea. 😁 

Maybe we want to spend a little time pushing on it to make sure it really improves readability, since I don't think it adds new functionality. The other question is if it complicates implementation, or if it could be easily added in level 4?

-- 
GitHub Notification of comment by mirisuzanne
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6876#issuecomment-1030333609 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 4 February 2022 20:40:44 UTC