Re: [csswg-drafts] [css-selectors] Proposal for allowing selectors that depend on layout (:stuck, :snap, :on-screen, etc) (#5979)

Hello hello! While I deeply appreciate all the moves towards a more powerful CSS, I'm a little bit worried that the pseudo-class approach has been rejected (#1656) because a drawback of the container query approach is that it’s very cumbersome to **target** of the stuck element.

While the purpose of `@container scroll-state(stuck: top)` is to say “One of my children with `position: sticky;` is stuck!”, the purpose of a `:stuck` (or `:scroll-state(stuck: top)`) pseudo-class is to directly target that stuck element. Without a pseudo, you have no idea which of the children is stuck.

If you have a list with dozens of items (e.g. `ul > li.card * 80`) where the stuck item should receive a shadow, you end up creating dozens of containers while there’s only 1 scrollable area (`ul`) so that you can `@container scroll-state(stuck: top)` and effectively target the stuck element (and not all cards at once 😨).

Furthermore, if you want that `.card` item to be the HTML element receiving the shadow, you also need 1 extra HTML wrapper for each card, since you can only access the children of the container inside `@container`.

With a `:stuck` (or `:scroll-state(stuck: top)`) pseudo-class , we could directly target the stuck element with no extra container (only the one on `ul` would be needed), and no extra markup neither because the pseudo would target the stuck item, and not an unknown child.

If the technical challenges for a pseudo-class are still out of reach (seems like it was tricky in 2021… but maybe the experience since then is telling something else), maybe a technically possible improvement towards a simpler usage for code authors would be to couple `:stuck` with a container so it would only work for elements inside a container?

Could the same possibility of relaxation to avoid circularity than [the one recently done for layout containment](https://github.com/w3c/csswg-drafts/issues/10544#issuecomment-2248438355) be a thing for scrollable areas, too?

(Sorry if I’m saying nonsense. You're the spec experts. :p)

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


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

Received on Friday, 17 January 2025 01:04:09 UTC