v135 · css

::column pseudo element for Carousel

A ::column pseudo element, which allows applying a limited set of styles to the generated fragments. Specifically, this would be limited to styles which do not affect the layout, and thus can be applied post-layout.

concepts

  1. ::column live stage

    Toggle ::column background tint, scroll-snap target, and column-rule on and off; the CSS output updates live.

  2. Snap-scrolling without wrappers

    The spec's flagship use case: a paragraph stream paginated by the multi-column engine, each generated column a snap target. No <div class="slide"> markup.

  3. Column outline studio

    Drag column-count and gap sliders and watch ::column outline each generated column box in real time. Toggle between outlined and tinted styling modes to see the pseudo's reach.

  4. Column Styler

    Configure ::column background color, border style/width/color, padding, and box-shadow on a live multi-column text layout. See the generated CSS and watch column count and gap respond in real time.

  5. Multicol task board

    A flat task stream flows through a real multi-column container. ::column styles the generated fragments with backgrounds, borders, padding, and scroll-snap alignment, while a no-op probe shows that layout-affecting declarations do not reshape the columns.

  6. Newspaper Pagination

    A long article flows into a real multi-column layout. ::column styles each generated fragment — background, padding, border — without wrapper markup. Horizontal scroll-snap turns the multicol stream into a pageable newspaper. Four editorial modes: Broadsheet, Tabloid, Digital, and Highlighted.

  7. Column No-Op Probe

    The most important constraint of ::column: it only accepts post-layout properties. Click through eight properties — background, box-shadow, padding, border (allowed) vs. width, margin, font-size, display (silently ignored). See exactly which ones change the rendered output and which are no-ops per spec.

  8. ::column — No-op Property Explorer

    ::column is post-layout only: properties like width, margin, and font-size are silently accepted but have zero effect on layout. This side-by-side demo lets you toggle both working properties (background, column-rule, scroll-snap-align) and no-op properties (width, margin, padding) on the same carousel, making the constraint tactile rather than theoretical.

  9. Snap carousel with scroll-marker dots

    Both ::column and ::scroll-marker shipped in Chrome 135 and compose into a pure-CSS carousel: ::column { scroll-snap-align: start } paginates the content; card::scroll-marker generates the dot row with :target-current auto-highlighting the active slide — zero JavaScript, zero wrapper divs.

why it shipped

Often developers want to automatically paginate content based on the available size. This can be done today through the use of column fragmentation, though developers need access to a few additional styles to make these part of a carousel. Specifically, developers need to be able to:

references