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

The TAG review is [closed](https://github.com/w3ctag/design-reviews/issues/885#issuecomment-1775615757).

I would like to start working on a specification for scroll-based state queries. The states to be added at this point is:

- Stuck: query whether a sticky positioned container is stuck (offset applied) in a given direction
- Snapped: query whether a scroll-snap-aligned element is snapped to its scroll snap container in a given direction
- Overflowing: query whether a scrollable container has scrollable overflow in a given direction

Proposed resolutions:

1. Add the following to css-contain-4:
    - `sticky`, `snap`, and `overflow` as new container-type values that can be combined with existing container types
    - A `state()` function, similar to the `style()`, to `@container` to query these states

2. Use the same [modifications to the HTML event loop](https://drafts.csswg.org/scroll-animations/#html-processing-model-event-loop) as for scroll-driven animations to avoid layout cycles

Details for the proposed syntax can be found in [the explainer](https://lilles.github.io/explainers/state_container_queries.html#proposed-syntax), but is up for bikeshedding

Details and rationale for using the HTML event loop modifications can also be found in [the explainer](https://lilles.github.io/explainers/state_container_queries.html#layout-cycles).


-- 
GitHub Notification of comment by lilles
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/6402#issuecomment-1788747734 using your GitHub account


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

Received on Wednesday, 1 November 2023 10:43:53 UTC