Skip to content

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

Closed
@mirisuzanne

Description

@mirisuzanne

In the current proposal 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:

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

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

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

/* 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: ???; }

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions