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

bramus has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain-3] Multiple <container-query>s with multiple containers ==
[The spec](https://drafts.csswg.org/css-contain-3/) currently reads _(emphasis mine)_:

> Once an eligible query container has been selected for an element, **each container feature in the <container-condition> is evaluated against that query container**.

Applied to the example below, both conditions will be evaluated against `wrapper`

```css
.wrapper {
  container-name: wrapper;
}

.wrapper > .child {
  container-name: child;
  --responsive: true;
}

@container wrapper size(inline-size > 30em) and style(--responsive = true) {
  .wrapper > .child {
    /* styles */
  }
}
```

What I want to have `size(inline-size > 30em)` be evaluated against `wrapper` and `style(--responsive = true)` against `child` _(or any other wrapping container)_ ?

Would it be feasible to pursue something like the snippet below, where it's allowed to set a `<container-name>` for each `<container-query>`?
 
```css
/* Evaluate size() against wrapper, and evaluate style() against child */
@container wrapper size(inline-size > 30em) and child style(--responsive = true) {
  .child {
    /* styles */
  }
}
```

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6876 using your GitHub account


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

Received on Friday, 10 December 2021 09:52:12 UTC