[csswg-drafts] [css-contain-3] Make `<container-query>` optional in `@container` (#9192)

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

== [css-contain-3] Make `<container-query>` optional in `@container` ==
While we have a resolution in https://github.com/w3c/csswg-drafts/issues/7858 to add a function for every container query unit that allow to reference a named container, there is a much more lightweight way that can be implemented right away to make these use cases a little less annoying: making the `<query>` part of container queries optional.

This is real code I had to write yesterday:

```css
@container word-card (width < 100vw) {
 height: min(100cqw / var(--total-aspect-ratio), 40vh);
}
```

The entire reason this container query exists, is to allow me to use `cqw` units for that particular named container. The `(width < 100vw)` query is only there because omitting it would render the rule invalid, as [the spec](https://drafts.csswg.org/css-contain-3/#container-rule) makes this part mandatory. 

```
<container-condition> = [ <container-name> ]? <container-query>
```

Can we just make it optional?

If we’re fine with allowing entirely bare `@container {}` rules, the change could be as simple as:

```
<container-condition> = [ <container-name> ]? <container-query>?
```

if we want at least name OR condition, it would be:

```
<container-condition> = [ <container-name>? <container-query>? ]!
```

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


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

Received on Tuesday, 15 August 2023 13:49:53 UTC