AI Summary
→ 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 INSIGHTS - **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. → NOTABLE MOMENT The demonstration reveals that CSS columns can generate dynamic page fragments with automatic scroll markers, where resizing the carousel instantly updates the number of navigation dots without any JavaScript measurement, solving a previously complex responsive pagination problem with pure CSS. 💼 SPONSORS None detected 🏷️ CSS Carousels, Web Accessibility, Scroll Snap, CSS Pseudo-Elements, Progressive Enhancement