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>? ]!
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:
The entire reason this container query exists, is to allow me to use
cqwunits 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.Can we just make it optional?
If we’re fine with allowing entirely bare
@container {}rules, the change could be as simple as:if we want at least name OR condition, it would be: