v138 · css
Step Wizard
A multi-step checkout-style wizard where scroll-target-group: auto on the step nav promotes each <a href="#step-N"> into a scroll marker. The browser tracks :target-current as you scroll between steps — no IntersectionObserver, no manual class toggling.
Step 1 of 4
Steps
Account details
Shipping address
Payment
Review & confirm
Check your details before placing the order. The step indicator on the left tracked your progress automatically via scroll-target-group — zero JavaScript.
Order total: £49.99
Shipping: Standard (3–5 days)
Est. delivery: 4 June 2026
/* CSS-only step indicator — no IntersectionObserver needed */
/* 1. Declare the group on the nav list */
.step-list {
scroll-target-group: auto; /* links become scroll markers */
}
/* 2. Style the current step using :target-current */
.step-list li:target-current .step-link {
background: var(--text-black);
color: var(--bg-ivory);
}
/* No JS scroll listener, no MutationObserver, no getBoundingClientRect */
What replaces IntersectionObserver: Historically, a sticky progress sidebar
like this required an
IntersectionObserver to watch each step section enter the
viewport, then manually add/remove a CSS class on the matching nav item. With
scroll-target-group: auto, every anchor in the list whose href
points at a section inside the scroll container is promoted to a scroll marker. The browser
maintains :target-current automatically, making the JavaScript observer
redundant.