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

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

== [css-contain-3] Define a syntax for state-based container queries ==
In the discussion of [what container features can be queried](https://github.com/w3c/csswg-drafts/issues/5989), there was interest in queries based on the "current state" of a container – such as whether a `position: sticky` container is currently "stuck" (displaced from its in-flow position), or whether the box is currently visible on screen.

In the draft of [CSS Containment L3](https://drafts.csswg.org/css-contain-3/#container-type) we currently allow a `state` value for `container-type`, but different states may require different types of containment (or none at all), so I don't think that single type value will work. We also need to define which states are supported initially, and how these states are queried in the `@container` rule.

For example, something along the lines of:

```css
header {
  container: is-stuck is-visible / header;
  position: sticky;
  top: 0;
}

@container header (is-stuck) { /* … */ }
@container header (is-visible) { /* … */ }
```

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


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

Received on Monday, 21 June 2021 21:22:54 UTC