v135 · css

::scroll-marker and ::scroll-marker-group for Carousel

::scroll-marker and ::scroll-marker-group for scrolling containers: Pseudo elements that allow to create a set of focusable markers for all of the associated items within the scrolling container.

concepts

  1. Marker dots for a carousel

    The minimal pattern: each panel emits a dot, :target-current auto-highlights the visible one. No script bookkeeping required.

  2. Numbered pagination from a CSS counter

    The spec's pull-quote example: counter() inside ::scroll-marker { content } produces "1, 2, 3…" automatically; :target-current still picks out the active one.

  3. Marker style foundry

    Three preset stylings on the same carousel — dots, numbers, thumbnails — toggle live. The carousel is just a snap container; markers, focus, and arrow-key navigation come from the pseudo.

  4. Progress Tracker

    A 5-step onboarding flow using ::scroll-marker-group and ::scroll-marker:checked as a native step indicator. Configure marker shape, active color, scale, and type (dots vs numbers) live. Zero JavaScript for the active-step tracking.

  5. Tabbed sections

    A five-tab documentation UI where each panel emits its own ::scroll-marker tab button via content: attr(data-tab). ::scroll-marker-group: before collects them into the tab bar. :target-current styles the active tab. No JavaScript, no ARIA sync, no click handlers — keyboard navigation included.

why it shipped

Authors need to be able to easily create a set of focusable markers for all of their items, or pages of items when combined with automatic fragmentation.

references