W3C home > Mailing lists > Public > public-css-archive@w3.org > May 2021

Re: [csswg-drafts] [css-contain] Is there a use-case for querying explicit container selectors? (#6176)

From: Miriam Suzanne via GitHub <sysbot+gh@w3.org>
Date: Tue, 25 May 2021 17:14:24 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-848060480-1621962862-sysbot+gh@w3.org>
@mbacon-edocs I don't think it's possible that we would allow queries to _create_ containers. You will always need both. But the author does still have options. Components can "carry their own container" as a wrapping element. But I also think it's totally reasonable to think of "containers" as a layout concern (not attached to the component), and "queries" as a component concern (responding to space available in the layout). Queries are about responding to context, after all.

I do think there are several reasons we do want to allow specifying the container still:
- I originally assumed the queries would only match against containers with the necessary containment, but that doesn't seem like a good plan (#6306) which means you may want to skip over the nearest container, to query one with more appropriate containment.
- If we allow different _types_ of query, in addition to dimensional queries, that need becomes even more likely. With dimensions you often want to know the most immediate context, but with states & styles, that becomes less clear.

In working on a more [explicit syntax for containment](https://github.com/w3c/csswg-drafts/issues/6174#issuecomment-846313720), I also proposed a `custom-ident` syntax for this — allowing authors to name their containers in a more flexible way, and then refer to those names from the query. I think that provides a simpler syntax here (we don't have to handle complex selectors), while also making it possible to set up naming conventions. You could have, for example, containers named `layout` and containers named for their individual components, and explicitly decide when to query external or internal context… without hard-coding the selectors in the query:

```css
main {
  container-type: inline-size style;
  container-name:  layout-area;
}

@container layout-area (inline-size > 30em) { … }
```

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 25 May 2021 17:14:26 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:42:33 UTC