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

mirisuzanne has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-contain] Should there be a new syntax for establishing queryable containers? ==
In the [current proposal](https://github.com/w3c/csswg-drafts/issues/5796) for Container Queries, a container is any element with both `layout` and `size` containment. With the addition of 1D size containment (currently only `inline`), that can include size-containment _in the axis being queried_. At this point:

```css
.container-2d { contain: layout size; }
.container-inline { contain: layout inline-size; }
```

If block-only containment is possible, that could expand to:

```css
.container-block { contain: layout block-size; }
.container-width { contain: layout width; }
.container-height { contain: layout height; }
```

Once a container is established, it acts as a container-query target for descendants. That raises a few related questions:

1. Are there ever reasons to add `layout` and `size` containment, without establishing a new container context for descendant queries? (I don't believe that there is, based on my research so far. Authors generally want to query the closest context possible.)
2. Are there [queryable features](https://github.com/w3c/csswg-drafts/issues/5989) that would require a different set of containment values? For example, if we only want to query the value of custom properties, do we really need layout/size containment? (this depends a lot on what features we want to make queryable.)
3. Can we make it more clear or concise by adding explicit syntax for queries?

New syntax might help address any one or all of those cases, but each use-case might lead to slightly different solutions. This could happen with new values on the `contain` property, or with a new property (all names to-be-bikeshed):

```css
/* keyword as shortcut for layout/size */
.container-2d { contain: query; }
.container-inline { contain: inline-query; }
.container-block { contain: block-query; }
.container-width { contain: width-query; }
.container-height { contain: height-query; }

/* new property, also triggers appropriate layout/size containment */
.container-2d { container: size; }
.container-inline { container: inline; }
.container-block { container: block; }
.container-width { container: width; }
.container-height { container: height; }

/* queries that don't rely on size containment?? */
.container { container: ???; }
```


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6174 using your GitHub account


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

Received on Friday, 2 April 2021 17:42:16 UTC