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

> Furthermore, if all elements were style containers by default, is style still a necessary value for container-type? … I.e. `container-type: inline-size;` will result in the element being both a style and size container.

That seems right to me.

> it — as an author — would feel more logical to write @style(<style-query>) { … } instead of @container / style (<style-query) { … } though.

Specifying the container-type isn't required in the current syntax, and (as you note) `style` might not even be needed as a type if we do make it a default everywhere. We also made the queries into functions. So the currently proposed syntax here for most cases would be:

```css
@container style(--effect: fancy) {…}
@container size(width >= 20em) {…}
```

I think that's already pretty readable? What I like about `@container` as a rule for both size and style is that it clarifies *what element you are querying*, before stating *what feature to query* – and then it allows you to optionally filter those elements by a container name:

```css
@container card style(--effect: fancy) {…}
@container article size(width >= 20em) {…}
```

If we say that every element is a style container, then there would be no reason to ever use `/ style` in the preamble, since that would not filter out any elements. 

> 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.

There is nothing about the word "container" that implies size, so this would only be true for authors with a strong historic attachment to "container queries" as an Idea. That seems to me like a very focused and temporary issue, easily overcome by some good resources.

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


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

Received on Thursday, 9 December 2021 17:26:34 UTC