fragmentation

Column styling

Problem

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:

• Set scroll snap points on them.
• Implicitly create scroll-marker-group.

Proposal

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 */
}

Example

See examples built on the polyfill:

• Itemized block children
• Flowing content

Missing capabilities

While the above can handle straightforward cases, it is missing the ability to style a few interesting edge cases:

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

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