[css-contain-3] Define a syntax for style-based container queries · Issue #6396 · w3c/csswg-drafts (original) (raw)

Container Queries should allow us to write conditional rules based on the computed styles of an ancestor container, since, according to @andruud:

Knowing the computed style (and even layout) of the container before evaluating the container query is already needed for normal (size) queries.

I'm branching this issue off from #5989 (What container features can be queried?) and #5624 (Higher level custom properties that control multiple declarations) – to specifically discuss syntax for querying a container's computed styles as part of css-contain-3.

Several of the use-cases mentioned so far (actual syntax TBD):

1. testing for a discrete value on a property, eg (background-color = red) or (--pill = on)
2. testing that a custom property has any not-guaranteed-invalid value, eg (--is-small)
3. testing range comparisons of length values, eg (50vw < 400px) or (--small > 50vw)

And some of the issues to address:

• We need to define how discrete values are compared (is it a token sequence? how is whitespace handled? etc)
• Custom properties used in range queries may need to be registered with @property
• Some values (like % lengths) evaluate differently on different properties. What do they mean in a query?

I'd like to get more use-cases and issues documented here, so that we can work through them in more detail.