What are the key takeaways from this Shop Talk Show episode?

Key insights include: **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.

What did Adam Argyle discuss on Shop Talk Show?

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 topics include: **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..

How long is this episode of Shop Talk Show?

This episode is 70 minutes long. SignalCast provides an AI-generated summary so you can get the key insights in about 3 minutes.

Shop Talk Show

659: CSS Carousel Configurator Demos with Adam Argyle

April 7, 2025

70 min episode · 2 min read

Adam Argyle

Episode

70 min

Read time

2 min

Topics

Productivity, Leadership

AI-Generated Summary

Published Dec 25, 2025

Key Takeaways

✓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.

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.

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.

Know someone who'd find this useful?

Episode Transcript

Hey. You're listening. That was a that was a visual pun, for the show, but, hey. Hi. You're listening to another episode of the ShopTalk Show, ShopManks. Thanks for tuning in. I'm Dave Rupert. With me is Chris Coy. Hey. Chris, who do we got in the studio? I admit it took me till the second revolution that you were making a carousel joke. It's Oh oh, that's good. We're taught today, we're talking about a revolution in web design. Wow. Revolutero. Wow. I'm not even gonna go there. Adam Argyle, friend of the show, back in the back in the helm on the show with sixty minutes notice. Thanks. Thanks, Adam. You know? Of course. That's how you know it's a hot topic. Yeah. Hot topic indeed. I It's it's also your fault for putting a demo out on, like, a Tuesday or you're leasing features on a Tuesday. Yeah. Yeah. It does it doesn't have your name on it, but I assume you worked on it. The carousel configurator. It's at one of my favorite URLs, chrome.dev, which it looks like kind of, unfortunately, you've implied some CSS to. Remember, it was just a it was just like a u l for a long time. Of l i's. Yeah. Yeah. I mean, it's hardly better than that right now, let's be honest. I know, but I I I'm against it. Put it in there. Put it in there. More revert. Revert. Yeah. We liked the wiki links. Yeah. Yeah. But it's okay. Chrome dot dev, and then you just click on the carousel configurator thing, and it takes you to this page that you should open in, Canary if you're gonna do it anytime in the next, I don't know, little while, I guess. Because otherwise, it is just gonna show you a big warning that says you're using a browser that doesn't support these features. But Canary has shipped at the moment all of the features necessary for this to work. So what it is is, you know, if I can actually, you know what? I'm gonna share my screen. Sorry, audio only listeners. Pop over to YouTube if you want to. We'll, of course, make this audio friendly as well, but I figure it's worth it's worth sharing, the look of this thing, if only for the three of us to be looking at the same thing. Yeah. The configurator's a really good place to start because you can be like, what? The wheezy heezy is going on here. And then you're like, oh, buttons, scroll buttons. Is that it? Oh, that's so innocent. Oh, some buttons on my scroller. Oh, okay. Yeah. Well, I, you know, I had, you know, I I had emotions almost looking at this. One is that it's amazing. Two is that you're using that cool font with the baked in Yes. I do. Text highlighting, which I can't I will never stop talking about because no font foundry has picked …

Get the full transcript (14,269 words) + summary by email — free

One-time email with the complete transcript and AI summary of this episode. No account needed.

One email, no spam. We’ll also show you what SignalCast does.

Browse all Shop Talk Show transcripts →