Often developers want to automatically paginate content based on the available size. This can be done today through the use of column fragmentation (example), though developers need access to a few additional styles to make these part of a carousel. Specifically, developers need to be able to:
See #10715 for discussion of the proposal. We propose one of a few options for addressing this use case, the last of which is the expected path explored here.
A ::column pseudoclass, which allows applying a limited set of styles to the generated columns. Specifically, this would be limited to styles which do not affect the layout, and thus can be applied post-layout.
E.g. the following example automatically paginates a list of items snapping each page into view.
ul {
overflow: auto;
container-type: size;
columns: 1;
}
ul::column {
scroll-snap-align: center;
}
This pseudoclass can additionally be used for the creation of scroll-marker-group:
ul::column::scroll-marker {
/* Marker styling */
}
See examples built on the polyfill:
While the above can handle straightforward cases, it is missing the ability to style a few interesting edge cases:
Peeking into subsequent pages.
Column layouts force an integer number of columns per page. As such, it’s not possible to make the next column partially visible with a slightly smaller width.
Making a block direction carousel.
We likely need a way either for column overflow to flow in the block direction, or a way to apply page fragmentation within a block as we can do with columns.