← Back to release summary

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

Category
CSS
Type
New or changed feature
Status
Enabled by default (Chrome 135)
Intent stage
None

Summary

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

Motivation

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. For individual items, an author can do this manually, though it requires writing extra elements which need to be kept up to date with the items to which they scroll. Script also needs to be used to get the desired scrolling behavior. For dynamically content-sized pages, this can only currently be done with script which generates DOM. By having a way to automatically generate markers, many more advanced UI patterns can be solved in CSS.

Standards & signals

Explainers: https://github.com/w3c/csswg-drafts/blob/main/css-overflow-5/carousel-explainer.md

View on chromestatus.com