Experimental Feature

⚠️ Unsupported ⚠️

This gallery requires a few CSS features that aren't present in your current browser.

To try this out, download Canary and visit chrome://flags/#enable-experimental-web-platform-features in a tab, enable it, and reload this page.

Wizard

Scroll Markers Scroll-State Queries interactivity: inert Anchor

Keep track of user's along a guided process with scroll markers. The scroll-state() queries inert any form the user isn't currently on.

If there's no form elements or numbers, this is often called "onboarding." Here's a collection of onboarding demos that you could rebuild with CSS carousel markers easily.