- From: CSS Meeting Bot via GitHub <sysbot+gh@w3.org>
- Date: Wed, 25 Sep 2024 21:58:54 +0000
- To: public-css-archive@w3.org
The CSS Working Group just discussed `[css-pseudo-4] Enabling carousel design patterns in CSS`. <details><summary>The full IRC log of that discussion</summary> <TabAtkins> flackr: [introduces self]<br> <TabAtkins> flackr: I've been doing a lot of exploration into new UI patterns on the web, one of which is carousels.<br> <TabAtkins> flackr: if you look up "should I use a carousel", the common answer is no<br> <TabAtkins> flackr: session complete<br> <TabAtkins> flackr: this website goes into a bunch of pitfalls people often run into when they write carousels<br> <TabAtkins> flackr: This particular example is a bad carousel too, it auto advances, I can't swipe, etc<br> <TabAtkins> flackr: despite the fact that they're often done poorly, there are many many carousel components<br> <TabAtkins> [tech issues]<br> <TabAtkins> flackr: this is bootstrap, for example<br> <TabAtkins> flackr: OpenUI has done a long exploration of carousel pattern<br> <TabAtkins> flackr: Adam created a demo showing all the different "shapes" for a carousel<br> <TabAtkins> flackr: dots, thumbnails, no page markers, no arrows, previews of the next item<br> <TabAtkins> flackr: you can have shopping carousels, where you move be3tween *pages* of items<br> <TabAtkins> flackr: whether we like them or not, devs create carousels, so we should make them better<br> <TabAtkins> flackr: looking at most of these, there's some common features<br> <TabAtkins> flackr: CSS today comes pretty close to letting you build something like this in a scrolling elmeent<br> <TabAtkins> flackr: with Scroll Snap you can make something that slides from pane to pane, supports touch<br> <TabAtkins> flackr: because eit's just a scroll, any scrolling mechanism works, better than explicit event handlers<br> <TabAtkins> flackr: you just have to roll a few pieces yourself<br> <TabAtkins> flackr: that's what Adam did on his site, making a few extra bits in JS<br> <TabAtkins> flackr: so I looked into what we can do better, so it's just scrolling, we can accelerate that, and navigate it in the browser so it's more accessible<br> <TabAtkins> flackr: I have an explainer where I touch on these features<br> <TabAtkins> flackr: you have scroll-snap, as mentioned<br> <TabAtkins> flackr: you often have buttons to scroll between items/pages<br> <flackr> demo: https://gui-challenges.web.app/carousel/dist/<br> <TabAtkins> flackr: there's often a progress indicator<br> <TabAtkins> flackr: the progress updates as you scroll<br> <TabAtkins> flackr: and if you have all of these things, you can make a carousel<br> <TabAtkins> flackr: you can change where these things are positioned, you can make vertical carousels, any combo<br> <TabAtkins> flackr: breaking these down, I think we can make it possible to express in css<br> <TabAtkins> flackr: i've outline a set of features i'd like to dive into, to explain what part each is offering and how it's used to build a carousel<br> <TabAtkins> flackr: first, some form of stylable fragmentation<br> <TabAtkins> flackr: to create automatic pagination<br> <TabAtkins> flackr: if you use multicol fragmentation, columns:1<br> <TabAtkins> flackr: you'll get a layout with one page of content per fragment<br> <TabAtkins> flackr: you'll get a long list of columns, split up into "pages"<br> <TabAtkins> flackr: if we let yous corll-snap to that, you get a paginated experience<br> <TabAtkins> flackr: scroll markers if about those progress indicators<br> <TabAtkins> flackr: skipping the "flow into Grid areas" temporarily<br> <TabAtkins> flackr: scroll buttons are the next/prev buttons<br> <TabAtkins> flackr: You can roll them on your own, but it would be convenient to auto create them<br> <TabAtkins> flackr: finally, inert<br> <TabAtkins> flackr: the ARIA authoring guidelines for carousels recommend that tonly the onscreen content is present in tab order, and the next/prev buttons are used to bring up the next slide<br> <TabAtkins> flackr: so you don't trap people in a long list of slide contents<br> <TabAtkins> flackr: currently authors have to do this manually, updating the inert attribute on each slide<br> <TabAtkins> flackr: but you could imagine updating this automatically as you scroll or click the buttons<br> <TabAtkins> flackr: so that's a quick overview, I want to dive into some of them<br> </details> -- GitHub Notification of comment by css-meeting-bot Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9745#issuecomment-2375337556 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 25 September 2024 21:58:55 UTC