Skip to content

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

Closed
@mirisuzanne

Description

@mirisuzanne

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.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions