The arrival of CSS Overflow 5 with Chrome 135 brings exciting new features for creating scroll and carousel experiences without relying on JavaScript. This article details various scroll and carousel implementations that utilize features like scroll buttons and markers to enhance functionality. Accessibility has been prioritized, allowing the browser to facilitate carousel best practices, making them inherently more accessible to users. The post also provides guidance on building carousels integrated into any scroll area on a website, highlighting the practical CSS required to implement these enhancements effectively.
From Chrome 135, you can use features from the CSS Overflow 5 specification that have been designed to create scroll and carousel experiences.
Even more impressive is the accessibility story. Carousel best practices are handled by the browser, thanks to the engineering and accessibility teams working together.
In version one of CSS carousel features, the buttons and markers are created from CSS. The browser places the elements as siblings, with the proper roles, in the proper tab order.
You can add buttons and markers to any scroll area on your site. The following CSS creates a basic scroll area for use in later steps to add buttons and markers.
Collection
[
|
...
]