Re: [csswg-drafts] [css-contain-3] Provide a syntax to query a specific container-type (#6393)

> Perhaps all elements are style containers by default

If that were the case, that would solve [Higher Level Custom Properties that were talked about late 2020](https://github.com/w3c/csswg-drafts/issues/5624#issuecomment-746339609), no? If I interpret things correctly, the there proposed `@if (<style-query) { … }` could be seen as syntactic sugar for `@container / style (<style-query) { … }`, right?

Furthermore, if all elements were style containers by default, is `style` still a necessary value for `container-type`? Reasoning: as all elements already are style containers, there's not need to define them manually as such, right?
Note that in this case, as a side-effect to that decision, setting `container-type` to, for example, `inline-size` would be something to apply on top of it already being a style container. I.e. `container-type: inline-size;` will result in the element being both a style and size container.

---

Regarding the syntax itself: I feel that there's some tight clinging onto the `@container` at-rule here. With all elements (possibly) being style containers, it — as an author — would feel more logical to write `@style(<style-query>) { … }` instead of `@container / style (<style-query) { … }` though.

IIRC there is discussion somewhere that warned/decided against introducing a lot of new at-rules, so I can definitely understand. From an author's POV however, it feels a bit weird though. I think this "weirdness" stems from the fact that viewport media queries (`@media`) always are size based queries, not style based ones.

My initial reaction to container queries is the same: using `@container` is about the size of the element. I understand that it's more than size only, but I can imagine a lot of authors will be confused about it or only get part of the message (the size part), missing out on style/state/x containers.

---

What I'm trying to say here: as an author, this piece of code would be highly readable, even if I wouldn't know the exact details about style or container queries:

```css
.item {
  --effect: none;
  …

  @style (--effect: fancy) { /* targets self */
    …
  }

  @container (width >= 20em) { /* targets closest parent with size containment */
    …
   }
}
```

A version that uses `@container / style (…)` instead would be harder to read and can confusing, as `@container` there targets a parent whereas `@container / style` targets the element itself.

Given this last confusion I'm raising here: yes, this could be seen as a plea for keeping `@container` reserved for only size based querying.

---

Apologies if I'm sidetracking here, or if I'm raising things in here that were already discussed. Feel free to ignore what's not relevant, I know you all will make the correct decisions in the end :)

_(Congrats on hitting FPWD BTW! 🎉)_

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


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

Received on Wednesday, 8 December 2021 23:09:12 UTC