We just announced how CSS can make carousels on the Chrome Blog!
CSS Carousel Configurator:
I made this so you can directly see the relationship of a feature you want and the related CSS.
CSS Carousel Gallery:
Showcases meaningful use cases and exemplifies how to orchestrate many capabilities together.
#CSS only carousels arrive in Chrome 135 ⤷ nerdy.dev/css-carousel...Adam Argyle
so no available fall back for other browser clients??Henri Helvetica ????????????????????
some of the examples in the gallery 'work' in Safari, just different - a little bit of @supports and PE should sort everyone out I reckon :) chrome.dev/carousel/Stuart Robson
it's just a scroller if there's no support these carousel features are just "added affordances" to help users discover and navigateAdam Argyle
tell me more about what PE you're thinkin of?! maybe like, showing captions? so always show captions unless there's support for scroll-state() at which point it's cool to hide them by default? def doable. many of my scroll-state() demos do that developer.chrome.com/blog/css-scr...
I can tell you what PE I thought of... Physical Education classes in school.Ana Tudor
I've only given it a 2 minute side-by-side to see what's 'different' to come to the conclusion that 'there are ways' :))
it does look like i have layout / container query work to do to make these demo's have better fallbacks. i'll add it to my work backlog!
fwiw, that’s not my expectation. I saw the warning in Safari, I was pleased things mostly worked ❤️
browser takes care of: ✅ the stateful buttons and their accessibility ✅ the stateful markers (dots/thumbnails/etc) and their accessibility the buttons :disable at the edge, the dots are :target-current when their related item is snapped or in view, keyboard interactions are all setup, and more!!
I’m curious about why there are `scroll-state(snapped)` container queries, while the specification (Scroll Snap level 2 to be specific) contains `:snapped` pseudo classes. Are they for different use cases?Niklas
:snapped is an added bonus we'd like to get to, but we instead hit 3 birds with one scroll-state() stone (snapped, stuck, overflowing) and paved the way for other container queries around state there's also the snap events, which have their own advantages over the scroll-state() queries or :snapped
This is amazing, but I won't be able to use it for real until Safari/Edge/Firefox also add support, who knows how long that will take ????????????????Roland Hougs
No flags, no tricks nor trials? Just like that?Bogdan
link to demo?
been behind flags for months, the specs have been thoroughly evaluated, we've been tons of proofs, and yep, v1 of it all is ready we're not done yet!
Love it, absolutely love it! Great job!
AMA CSS Carousels on YouTube youtube.com/live/zL1q5E3...
Stoked to see these primitives. A boon for accessibility and consistency! People love swiping these sort of things on touch devices... should we have a native way of enabling swiping for mouse users? ???? (It's a pain to implement in userland ????)Rasmus Fløe
@argyleink this is cool but… isn’t this massively violating separation of concerns? CSS creates not-just-visual pseudo elements that have their own accessibility tree and I am assuming something like internal events at least. Should this not come from html?
Thomas Michael Semmler
@nachtfunke scrollbars and any arrow buttons they offer arent HTML elements, these scroll affordances are very similar to those, just easier to style and customize.
v2 of the spec will allow you to "bring your own buttons and links" that the browser will wire up as if they're scroll buttons and markers. but to keep the accessibility easy (aka less foot guns) having the browser manage them has a lot of userland benefits.
and yep, we're working on JS events and integrations more in v2 also!
Adam Argyle :chrome:
@argyleink How to navigate to the second card!?!
Second place will not be shunned...or will it?
westbrook
Whaaaat?!Jacob Packert
@argyleink Wow that’s very nice carousel are everywhere on the web !
I’m very looking forward to see how it will play with accessibility.
I built carousel with a very similar philosophy (horizontal scroll, buttons to control the scrolling with snapping points) and the accessibility audit company raised lots of issues. I hope we’ll can benefit from a built in browser example!lbineau
Looks great. Have other browsers expressed a position on this?Ollie Williams
@argyleink I hope users get a preference to switch them off. Let designers build them and users discard them.
Eric Eggert
