- From: Robert Flack via GitHub <sysbot+gh@w3.org>
- Date: Fri, 09 Aug 2024 19:31:59 +0000
- To: public-css-archive@w3.org
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