[csswg-drafts] [css-contain-3] Define a syntax for style-based container queries (#6396)

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

== [css-contain-3] Define a syntax for style-based container queries ==
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](https://drafts.csswg.org/css-contain-3/#style-container).

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.

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


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

Received on Friday, 18 June 2021 18:51:34 UTC