Re: [csswg-drafts] [css-contain] Should there be a new syntax for establishing queryable containers? (#6174)

Hi all, this is where I think an HTML element could help to differentiate the markup. In many instances with container queries, we need a wrapper element.

```
<container>
 <div class="child-i-want-to-style">...</div>
</container>
```

The reason I think  introducing a new `<container>` element via markup could help is to avoid "divitis" and create a bit more clarity for the additional markup that container queries require. It breaks up what would otherwise be:

```
<div class="container">
  <div class="child-i-want-to-style">...</div>
</div>
```

And is more declarative in the type of containment, without looking up the CSS. This also prevents the requirement for managing classes like `container-inline`, `container-2d`, etc.

### Attributes on &lt;container>

We could also use attributes to specify the containment:

```
<container contain="inline">
 <div class="child-i-want-to-style">...</div>
</container>
```

Something like `<container contain="inline">` or `<container inline>` would get default CSS values of:

```css
contain: layout inline-size;
```

`<container>` by default would have some default styles which could be overridden like other HTML by applying CSS to it.




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


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

Received on Wednesday, 28 April 2021 19:08:15 UTC