Editorial review: Document CSS carousel functionality #38752

chrisdavidmills · 2025-03-21T16:11:04Z

Description

Chrome 135 supports the new CSS carousel functionality — see the following ChromeStatus entries:

This PR aims to document all the new functionality. Specifically, it adds:

::scroll-button() ref page
scroll-marker-group ref page
::scroll-marker-group ref page
::scroll-marker ref page
:target-current ref page
::column ref page
A guide showing how to use the features together to create CSS carousels
All the above features to the CSS overflow module landing page
The pseudo-classes and pseudo-elements to the pseudo-classes and pseudo-elements landing pages

Motivation

Additional details

Related issues and pull requests

github-actions · 2025-03-21T16:13:08Z

Preview URLs (10 pages)

Flaws (14)

Note! 3 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/CSS/::column
Title: ::column
Flaw count: 1

macros:
- Can't resolve /en-US/docs/Web/CSS/interactivity

URL: /en-US/docs/Web/CSS/::scroll-button
Title: ::scroll-button()
Flaw count: 1

macros:
- Can't resolve /en-US/docs/Web/CSS/interactivity

URL: /en-US/docs/Web/CSS/::scroll-marker
Title: ::scroll-marker
Flaw count: 1

macros:
- Can't resolve /en-US/docs/Web/CSS/interactivity

URL: /en-US/docs/Web/CSS/::scroll-marker-group
Title: ::scroll-marker-group
Flaw count: 3

macros:
- Macro produces link /en-US/docs/Web/CSS/interactive which is a redirect
- Can't resolve /en-US/docs/Glossary/inert
- Can't resolve /en-US/docs/Web/CSS/interactivity

URL: /en-US/docs/Web/CSS/:target-current
Title: :target-current
Flaw count: 1

macros:
- Can't resolve /en-US/docs/Web/CSS/interactivity

URL: /en-US/docs/Web/CSS/CSS_overflow/CSS_carousels
Title: Creating CSS carousels
Flaw count: 6

macros:
- Can't resolve /en-US/docs/Web/CSS/interactivity
- Can't resolve /en-US/docs/Glossary/inert
- Can't resolve /en-US/docs/Glossary/inert
- Can't resolve /en-US/docs/Web/CSS/interactivity
- Macro produces link /en-US/docs/Web/CSS/interactive which is a redirect
- and 1 more flaws omitted

URL: /en-US/docs/Web/CSS/scroll-marker-group
Title: scroll-marker-group
Flaw count: 1

macros:
- Can't resolve /en-US/docs/Web/CSS/interactivity

External URLs (7)

URL: /en-US/docs/Web/CSS/::column
Title: ::column

https://chrome.dev/carousel/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/::scroll-button
Title: ::scroll-button()

https://chrome.dev/carousel/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/::scroll-marker
Title: ::scroll-marker

https://chrome.dev/carousel/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/::scroll-marker-group
Title: ::scroll-marker-group

https://chrome.dev/carousel/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/:target-current
Title: :target-current

https://chrome.dev/carousel/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/CSS_overflow/CSS_carousels
Title: Creating CSS carousels

https://chrome.dev/carousel/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/scroll-marker-group
Title: scroll-marker-group

https://chrome.dev/carousel/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2025-03-26 10:05:58)

argyleink

excellent work as always!

left a few notes and some tips 🙂

files/en-us/web/css/_colon_target-current/index.md

argyleink · 2025-03-24T17:29:20Z

files/en-us/web/css/_doublecolon_scroll-marker-group/index.md

+
+A scroll container's **`::scroll-marker-group`** pseudo-element automatically contains any {{cssxref("::scroll-marker")}} pseudo-elements generated on its descendants. This allows them to be positioned and laid out as a group, and is typically used when creating a CSS carousel, to create a scroll position indicator. The individual scroll markers can also be used to navigate to their associated content items.
+
+The {{cssxref("scroll-marker-group")}} property must be set to a non-`none` value on the scroll container for a `::scroll-marker-group` pseudo-element to be generated; the chosen value determines whether it is generated `before` or `after` the container's DOM content.


Suggested change

The {{cssxref("scroll-marker-group")}} property must be set to a non-`none` value on the scroll container for a `::scroll-marker-group` pseudo-element to be generated; the chosen value determines whether it is generated `before` or `after` the container's DOM content.

The {{cssxref("scroll-marker-group")}} property must be set to a non-`none` value on the scroll container for a `::scroll-marker-group` pseudo-element to be generated; the chosen value determines whether it is generated `before` or `after` the container's DOM content. A choice of `before` puts the marker group first in the carousel tab order, while `after` puts the markers at the end of the carousel tab order.

noting how this choice affects the focus order

Ah, I didn't know this — useful, thanks!

I've added the following at the end of the paragraph:

It also affects where the scroll marker group appears in the container's tab order — before puts it at the start, while after puts it at the end.

Am I correct about the choice affecting where the pseudo-elements are generated? This is what the spec seems to be saying, although Chrome doesn't actually seem to do this (it always seems to put the generated pseudo-element before).

I've also added the information on tab order to the scroll-marker-group property page, and the CSS carousels guide.

i've got clarification, it affects both focus order and layout box order but not dom structure

Cool, thanks for clarifying; I have updated the descriptions of the scroll-marker-group property value effects to suit.

files/en-us/web/css/_doublecolon_scroll-marker-group/index.md

argyleink

lgtm

estelle

i reviewed part of this PR.

We need the most basic possible example for the guide, and then we need to walk users through the enhancement from this is an scroll container that overflows to this is a basic carousel.

then we can add that basic example to each property page, then demonstrate updates to that feature only on each page, and link to the guide for the "to see how the rest of this demo worked".

a lot needs to be reworked, so pausing my review here. I'll try creating some codepens for you to help you out.

estelle · 2025-03-26T17:44:57Z

files/en-us/web/css/_colon_target-current/index.md

+
+## See also
+
+- {{cssxref("scroll-marker-group")}} and {{cssxref("interactivity")}} properties


broken link

estelle · 2025-03-26T17:49:32Z

files/en-us/web/css/_colon_target-current/index.md

+
+{{CSSRef}}
+
+The **`:target-current`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects the {{cssxref("::scroll-marker")}} pseudo-element of a {{cssxref("scroll-marker-group")}} that is currently scrolled to, in other words, the **active** scroll marker. This can be used to style it differently, so the user can see see their navigation position inside the scroll marker group.


Suggest putting the word being defined before its definition.

Suggested change

The **`:target-current`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects the {{cssxref("::scroll-marker")}} pseudo-element of a {{cssxref("scroll-marker-group")}} that is currently scrolled to, in other words, the **active** scroll marker. This can be used to style it differently, so the user can see see their navigation position inside the scroll marker group.

The **`:target-current`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects the **active** scroll marker, the {{cssxref("::scroll-marker")}} pseudo-element of a {{cssxref("scroll-marker-group")}} that is currently scrolled to. This [selector](/en-US/docs/Web/CSS/CSS_selectors) can be used to style the active navigation position within a [scroll marker group]().

or possibly something like

This [selector](/en-US/docs/Web/CSS/CSS_selectors) enables providing active styles to the current navigation position within a [scroll marker group](), which improves user experience.

if the selector is not valid on anything other than ::scroll-marker, we should say that (in case anyone thinks it might also be related to :target).

estelle · 2025-03-26T18:01:02Z

files/en-us/web/css/_colon_target-current/index.md

+
+## Examples
+
+See [Creating CSS carousels](/en-US/docs/Web/CSS/CSS_overflow/CSS_carousels) for full examples that use the `:target-current` pseudo-class.


Suggested change

See [Creating CSS carousels](/en-US/docs/Web/CSS/CSS_overflow/CSS_carousels) for full examples that use the `:target-current` pseudo-class.

See [Creating CSS carousels](/en-US/docs/Web/CSS/CSS_overflow/CSS_carousels#first_example) for examples of using the `:target-current` pseudo-class.

estelle · 2025-03-26T18:03:01Z

files/en-us/web/css/_colon_target-current/index.md

+::scroll-marker:target-current {
+  background-color: black;
+}


Suggested change

::scroll-marker:target-current {

background-color: black;

}

::scroll-marker {

color: black;

background-color: white;

}

::scroll-marker:target-current {

color: white;

background-color: black;

}

estelle · 2025-03-26T18:03:36Z

files/en-us/web/css/_colon_target-current/index.md

+
+## See also
+
+- {{cssxref("scroll-marker-group")}} and {{cssxref("interactivity")}} properties


Suggested change

- {{cssxref("scroll-marker-group")}} and {{cssxref("interactivity")}} properties

- {{cssxref("scroll-marker-group")}}

- {{cssxref("theOtherThing")}}

estelle · 2025-03-27T23:39:15Z

files/en-us/web/css/css_overflow/css_carousels/index.md

+
+## First example layout with flexbox
+
+In the first example, the unordered list is given a {{cssxref("width")}} of `100vw` to force it to the full width of the viewport, a {{cssxref("height")}} of `300px`, and `20px` of {{cssxref("padding")}}. We then give it a {{cssxref("display")}} value of `flex` to force the child list items to display horizontally, and a {{cssxref("gap")}} of `4vw` between each one.


Suggested change

In the first example, the unordered list is given a {{cssxref("width")}} of `100vw` to force it to the full width of the viewport, a {{cssxref("height")}} of `300px`, and `20px` of {{cssxref("padding")}}. We then give it a {{cssxref("display")}} value of `flex` to force the child list items to display horizontally, and a {{cssxref("gap")}} of `4vw` between each one.

The unordered list is made to fill the full width of the viewport, with a {{cssxref("height")}} of `300px` and some {{cssxref("padding")}}. We set the {{cssxref("display")}} to`flex`, defaulting the {{cssxref("flex-direction")}} `row` and the {{cssxref("flex-wrap")}} to `no-wrap`, and add a {{cssxref("gap")}} between each item. As the viewport is wider than our now horizontal row of flex-items, the `<ul>` will be a {{glossary("scroll container")}}.

Stop this section at this point, and show the demo, and suggest they scroll left and right,. We conclude "flex layout" before movin on.

estelle · 2025-03-27T23:44:44Z

files/en-us/web/css/css_overflow/css_carousels/index.md

+  border: 1px solid #ddd;
+  padding: 20px;
+
+  flex: 0 0 calc(100vw - 40px);


needlessly complex. does 100% work? or 96vw which is the width minus the gap?

estelle · 2025-03-27T23:48:32Z

files/en-us/web/css/css_overflow/css_carousels/index.md

+  list-style-type: none;
+  background-color: #eee;
+  border: 1px solid #ddd;
+  padding: 20px;


move the basic stuff to the first section. and the flex to the flexlayout section.

is the snap necessary? If yes, explain what it does, how it works, and demo it with guidance to test it out here and links to learn more.
if it's not necessary for carousels, add it after the carousel works in a rudimentary way as an enhancement.
either way, scroll snapping should be under it's own subheader with no other features explained in that part.

estelle · 2025-03-27T23:49:23Z

files/en-us/web/css/css_overflow/css_carousels/index.md

+}
+```
+
+## Setting inertness on non-visible articles


remove this section.
inertness is not ready yet. The links are broken. And, this is an advanced topic that should come after the carouself is otherwise working.

this section is NOT reviewed.

estelle · 2025-03-27T23:57:27Z

files/en-us/web/css/css_overflow/css_carousels/index.md

+```
+
+## Creating the scroll buttons
+


we need to explain why we are doing this and progress this guide in an order that teaches the features by enhancing the demo step by step. Add someone like "What we have now is a horizontal row of items, made up of individual flex items, with only one item visible at a time. We have to scroll to see the next item . The features defined in the ...." here, then go on.

I think it makes more sense to start with group and markers before left and right. but maybe there's a reason to go in this order.

estelle · 2025-03-28T00:50:07Z

I am working on a codepen for you. see https://codepen.io/estelle/pen/ByaOveM. it contains the steps to add in the order to add them for the guide to progress in a way that will make sense to people learning these features for the first time.

github-actions · 2025-03-28T13:45:50Z

This pull request has merge conflicts that must be resolved before it can be merged.

Document CSS carousel functionality

83197c3

chrisdavidmills requested a review from a team as a code owner March 21, 2025 16:11

chrisdavidmills requested review from estelle and removed request for a team March 21, 2025 16:11

chrisdavidmills marked this pull request as draft March 21, 2025 16:11

github-actions bot added Content:CSS Cascading Style Sheets docs size/l [PR only] 501-1000 LoC changed labels Mar 21, 2025

chrisdavidmills mentioned this pull request Mar 21, 2025

Add CSS carousel examples mdn/dom-examples#302

Open

Add all the reference pages

f102eb7

github-actions bot added size/xl [PR only] >1000 LoC changed and removed size/l [PR only] 501-1000 LoC changed labels Mar 24, 2025

chrisdavidmills marked this pull request as ready for review March 24, 2025 15:40

chrisdavidmills changed the title ~~Document CSS carousel functionality~~ Technical review: Document CSS carousel functionality Mar 24, 2025

argyleink reviewed Mar 24, 2025

View reviewed changes

Fixes for argyleink review comments

485e43e

chrisdavidmills requested a review from argyleink March 25, 2025 09:14

argyleink reviewed Mar 25, 2025

View reviewed changes

Correct information about the effects of scroll-marker-group values

af5232a

chrisdavidmills changed the title ~~Technical review: Document CSS carousel functionality~~ Editorial review: Document CSS carousel functionality Mar 26, 2025

estelle reviewed Mar 28, 2025

View reviewed changes

github-actions bot added the merge conflicts 🚧 [PR only] label Mar 28, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Editorial review: Document CSS carousel functionality #38752

Editorial review: Document CSS carousel functionality #38752

chrisdavidmills commented Mar 21, 2025 •

edited

Loading

github-actions bot commented Mar 21, 2025 •

edited

Loading

argyleink left a comment

argyleink Mar 24, 2025

chrisdavidmills Mar 25, 2025 •

edited

Loading

chrisdavidmills Mar 25, 2025

argyleink Mar 25, 2025

chrisdavidmills Mar 26, 2025

argyleink left a comment

estelle left a comment

estelle Mar 26, 2025

estelle Mar 26, 2025

estelle Mar 26, 2025

estelle Mar 26, 2025

estelle Mar 26, 2025

estelle Mar 26, 2025

estelle Mar 27, 2025

estelle Mar 27, 2025

estelle Mar 27, 2025

estelle Mar 27, 2025

estelle Mar 27, 2025

estelle Mar 27, 2025 •

edited

Loading

estelle commented Mar 28, 2025

github-actions bot commented Mar 28, 2025


		A scroll container's `::scroll-marker-group` pseudo-element automatically contains any {{cssxref("::scroll-marker")}} pseudo-elements generated on its descendants. This allows them to be positioned and laid out as a group, and is typically used when creating a CSS carousel, to create a scroll position indicator. The individual scroll markers can also be used to navigate to their associated content items.

		The {{cssxref("scroll-marker-group")}} property must be set to a non-`none` value on the scroll container for a `::scroll-marker-group` pseudo-element to be generated; the chosen value determines whether it is generated `before` or `after` the container's DOM content.


		## See also

		- {{cssxref("scroll-marker-group")}} and {{cssxref("interactivity")}} properties


		{{CSSRef}}

		The `:target-current` [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Pseudo-classes) selects the {{cssxref("::scroll-marker")}} pseudo-element of a {{cssxref("scroll-marker-group")}} that is currently scrolled to, in other words, the active scroll marker. This can be used to style it differently, so the user can see see their navigation position inside the scroll marker group.


		## Examples

		See [Creating CSS carousels](/en-US/docs/Web/CSS/CSS_overflow/CSS_carousels) for full examples that use the `:target-current` pseudo-class.

	- {{cssxref("scroll-marker-group")}} and {{cssxref("interactivity")}} properties
	- {{cssxref("scroll-marker-group")}}
	- {{cssxref("theOtherThing")}}


		## First example layout with flexbox

		In the first example, the unordered list is given a {{cssxref("width")}} of `100vw` to force it to the full width of the viewport, a {{cssxref("height")}} of `300px`, and `20px` of {{cssxref("padding")}}. We then give it a {{cssxref("display")}} value of `flex` to force the child list items to display horizontally, and a {{cssxref("gap")}} of `4vw` between each one.

Editorial review: Document CSS carousel functionality #38752

Are you sure you want to change the base?

Editorial review: Document CSS carousel functionality #38752

Conversation

chrisdavidmills commented Mar 21, 2025 • edited Loading

Description

Motivation

Additional details

Related issues and pull requests

github-actions bot commented Mar 21, 2025 • edited Loading

argyleink left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrisdavidmills Mar 25, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

argyleink left a comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle Mar 27, 2025 • edited Loading

Choose a reason for hiding this comment

estelle commented Mar 28, 2025

github-actions bot commented Mar 28, 2025

chrisdavidmills commented Mar 21, 2025 •

edited

Loading

github-actions bot commented Mar 21, 2025 •

edited

Loading

chrisdavidmills Mar 25, 2025 •

edited

Loading

estelle Mar 27, 2025 •

edited

Loading