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

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

== [css-contain-3] Provide a syntax to query a specific container-type ==
The draft [Container Query spec](https://drafts.csswg.org/css-contain-3/) describes the container query syntax in two parts: 

```css
@container <<container-name>>? <<container-query-list>> {
  <<stylesheet>>
}
```

Which resolve in two distinct steps:

1. **container selection**: Find the right container to query (nearest ancestor container, after optionally filtering by `<<container-name>>`)
2. **query evaluation**: Evaluate each feature in the `<<container-query-list>>`

If no eligible container is selected, the query evaluates to `false`. 

If the selected container in step 1 is not a valid [container type](https://drafts.csswg.org/css-contain-3/#container-type) for the query features used in step 2, then the query evaluates to `unknown`. For example, if we try to query a `block-size` container-type about its `inline` dimensions, that measurement is unknown. 

That means authors will likely _also_ want to filter and select containers based on container type – eg find the nearest `inline-size` container in step 1, in order to query its `width` in step 2. And, since a `<<container-query-list>>` could combine multiple different features, we might need to select for more than one container type.

Since container-names are custom identifiers, and container types are built-in keywords (with potential for new additions later on) we'll need some way to distinguish them — either by requiring dashed-idents for names (not a great option), or by adding distinct syntax for selecting each one in the `@container` rule. Something like:

```css
@container <<container-name>>? type(<<container-type>>+)? <<container-query-list>> {
  <<stylesheet>>
}

@container sidebar type(inline-size style) (width > 30em) and (--card: small) {
  <<stylesheet>>
}
```

- Is there a better approach than adding a `type()` function, or a better name for that function?
- Do we need clearer delineation between the selection & query aspects of the `@container` rule?

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


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

Received on Thursday, 17 June 2021 18:27:59 UTC