[csswg-drafts] [css-position] Sticky spacing (#4520)

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

== [css-position] Sticky spacing ==
### The Scene
I've discovered that I can get different sticky results with the same CSS and different DOM. 

<br>

Default [Sticky Stack](https://codepen.io/argyleink/pen/YzzZyMx) behavior:
![sticky-stack](https://css-at-cds.netlify.com/assets/sticky-stack.gif)

vs

[Sticky Slide](https://codepen.io/argyleink/pen/abbJOjP) behavior:
![sticky-slide](https://css-at-cds.netlify.com/assets/sticky-slide.gif)

### The Problem
Each of these demos is using a `<dl>` to get the job done, but one has a single `<dl>` and the other has many. In order to achieve the (arguably more native competitive style) sticky behavior, I have to break the semantics of my content. 

### Potential Solution
The children need a way to specify their spacing relationship to the other sticky items. The web has traditionally done this with margins, so what if we added to the sticky margins to the spec. This would be similar to scroll margins/padding, would follow new logical property syntax, and ultimately allow the first demo to achieve the look of the 2nd demo with a little bit of added CSS.

```css
dl > dt {
  position: sticky;
  top: 0;
  sticky-margin-block: 1rem;
}
```

The styles above specify that the sticky `<dt>`'s children should have space between them, so when they come near each other, the space should be maintained, and one element get's pushed/pulled out/in by the other. They compete for the space instead of share it.

##### Conclusion
Current sticky behavior can be super desirable, and has been very convenient for many of my use cases. But this one scenario has been tricky, because changing my HTML to get a specific CSS result doesn't feel appropriate. I don't think the syntax I proposed is as thoughtful as it could be, and should be thoroughly vetted. I do want to get a conversation started about the best ways to pacify this edge case, giving developers ways to achieve the effect without changing their markup.

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

Received on Tuesday, 19 November 2019 18:38:10 UTC