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

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

== [css-selectors] Proposal for allowing selectors that depend on layout (:stuck, :snap, :on-screen, etc) ==
**Spec and WG writings:**
- https://www.w3.org/TR/selectors-4/
- https://wiki.csswg.org/faq#selectors-that-depend-on-layout

**Relevant proposals/issues:**
- [:snap](https://github.com/w3c/csswg-drafts/issues/2999) proposal [closed]
- [:stuck](https://github.com/w3c/csswg-drafts/issues/1656) proposal [closed]

**Background:**
Proposals like `:snap` and `:stuck` have been rejected because the layout could be changed on the matched element, thus undoing what was done, which then redoes the effect.. forever. This can be seen in `:hover` effects that change layout and cause the mouse to go out and in of the element as fast as the browser can draw it all. Not good. Reasonable reason to reject the ideas.

**Proposal:**
Layout dependent selectors can **only be selector participants and never the subject**. 

```css
/* wouldn't work, not allowed */
:stuck { 
  position: static; 
  box-shadow: 0 1ex 1ch hsl(0 0% 0% / 25%);
}

/* would work */
:stuck > nav { 
  position: static; 
  box-shadow: 0 1ex 1ch hsl(0 0% 0% / 25%);
} 
```

The cycle is heavily mitigated or entirely eliminated by not allowing the layout relevant selector to target the element with the desired layout pseudo class. We provide the hook, but prevent the hook from changing itself. Thoughts?

**Conclusion:**
Instead of attempting some list of approved styles for layout dependent pseudo classes, 1 rule could help prevent tons of footguns while simultaneously unlocking many new effects. The catch is that developers will need an extra node in the component so the layout effect and the styles are separated (aka: the element being stuck isn't what has the box-shadow). 

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


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

Received on Thursday, 11 February 2021 16:29:21 UTC