[css-contain-3] Make <container-query> optional in @container (original) (raw)

Edit: The rationale below is wrong, but the proposal still stands, see #9192 (comment)

While we have a resolution in #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:

@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 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>? ]!