[csswg-drafts] [css-overflow-5] Scroll button pseudo-elements (#10722)

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

== [css-overflow-5] Scroll button pseudo-elements ==
As part of #9745 I propose adding a pseudo-element which can be created on a scrolling container to provide a button which navigates that scroller. This is a common pattern, typically requiring that developers manually create elements with script to drive these interactions.

Explainer: https://github.com/flackr/carousel/tree/main/scroll-button

E.g. from https://flackr.github.io/carousel/examples/scroll-button/
```css
.scroller {
  overflow: auto;
}
.scroller::scroll-up-button {
  content: "⬆️";
}
.scroller::scroll-down-button {
  content: "⬇️";
}
```

For a more practical example, see the implicit creation of markers in the [carousel demo](https://flackr.github.io/carousel/examples/carousel/image/).

Having these pseudo-elements allows developers to further reduce the amount of extra markup elements they need to add specifically for controls and make their page contents more about the semantics, e.g. a list of content. They can also easily trigger the buttons' presence depending on a state or media query.

Some questions for consideration / resolution:
1. Should the direction be part of the name or a parameter to a common pseudo-element name, e.g. scroll-<direction>-button or scroll-button(<direction>)? My preference is actually for the latter. This may also allow for styling of all scroll-buttons with a single selector.
2. What is the focus / tree order of these buttons? Naively I would think following the block direction, then inline direction, e.g. up, left, scroller, scroller::before, scroller contents, scroller::after, right, down.
3. Can we use logical directions? Hopefully yes!
4. How far should clicking one scroll? I think if the scroller has mandatory snap in the scroll axis it should scroll to the next snap area in that axis. Otherwise, I think the most reasonable would be to scroll by a "page" at a time (i.e. the equivalent of the page-up / page-down buttons, typically 85% of the scrollport).

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


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

Received on Friday, 9 August 2024 19:31:59 UTC