Sitelet https://github.com/w3c/csswg-drafts/issues/6396
Skip to content

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

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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