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

_(I've already given this some further thought, and have identified that this could have a bigger impact. To not loiter the original post, I'm posting it as a reply)_

If this change were to be considered, then why not have the original example `@container wrapper size(inline-size > 30em) and style(--responsive = true)` also work like `@container wrapper size(inline-size > 30em) and child style(--responsive = true)`, and thus revert that initial quote from the spec?

Would make sense with all elements being style containers by default [^1]. It would make these three examples below — where one is more explicit than the other about which container to target — behave in the same way:

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

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

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

Would also make a lot of sense when nesting `@container` rules _(which isn't specced yet)_:

```css
@container size(inline-size > 30em) { /* Evaluate size() against nearest size container */
  @container style(--responsive = true) { /* Evaluate style() against nearest style container, i.e. self */
    .child {
      …
    }
  }
}
```

To have a `size()` and `style()` container be evaluated against the same container — which was originally described — the introduction of extra parens could group both conditions:

```css
/* As they are grouped using parens, evaluate both against wrapper */
@container wrapper (size(inline-size > 30em) and style(--responsive = true)) {
  /* styles */
}
```

In summary, the evaluation would always behave like this:

- `<size-query>`: always evaluated against nearest size container _(most likely some parent)_, unless specified otherwise
- `<style-query>`: always evaluated against style container _(i.e. self)_, unless specified otherwise
- When mixing `<size-query>` and `<style-query>`, ungrouped: each container query behaves in the same way like it does  individually
- When mixing`<size-query>` and `<style-query>`,  grouped: Undecided on this, but these look like potential options:
  1. The first one determines the container 
  1. The `<size-query>` determines the container to use
  1. Authors must be explicit about it and set a `<container-name>`

[^1]: As read in https://github.com/w3c/csswg-drafts/issues/6393#issuecomment-988216116

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6876#issuecomment-990793583 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:55:10 UTC