659: CSS Carousel Configurator Demos with Adam Argyle

What It Covers

Adam Argyle demonstrates new CSS features in Chrome Canary that enable fully functional carousels without JavaScript, including scroll buttons, scroll markers, interactivity inert, and scroll state queries for accessible navigation patterns.

Key Questions Answered

• •Scroll Buttons Pseudo-Elements: CSS now generates native scroll buttons using `::scroll-button(left)` and `::scroll-button(right)` that automatically page through 85% of scroll port width, disable at edges, and maintain proper focus order without requiring JavaScript event handlers or DOM manipulation.
• •Scroll Markers for Navigation: The `::scroll-marker` pseudo-element creates navigation dots automatically for each list item, announces as ARIA tab list, supports keyboard arrow navigation, and allows custom content including text labels or images with alt text for screen readers using the attr() function.
• •Interactivity Inert Property: New CSS property enables scroll-based focus management where off-screen carousel items become non-focusable, creating flyover navigation that prevents keyboard users from tabbing through hundreds of hidden items while maintaining full accessibility when items scroll into view using scroll-driven animations.
• •Auto-Pages with CSS Columns: Setting `columns: 1` with `::column` pseudo-element creates dynamically snappable page fragments that adjust automatically on resize, generating corresponding scroll markers without measuring or JavaScript, enabling responsive pagination that adapts to any container width changes.
• •Content Visibility Virtualization: Combining `content-visibility: auto` with `contain-intrinsic-size` enables rendering only visible carousel items from thousands, lazy loading images with `loading="lazy"`, and using `scroll-start-target` to position users at specific items on page load without JavaScript intersection observers.