From eaeb53cdf1f11edeb22b04c2326bbcd6e171ea9f Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Fri, 22 Aug 2025 14:31:07 +0100 Subject: [PATCH 1/2] Add docs for scroll-target-group --- .../_doublecolon_scroll-marker-group/index.md | 4 + .../css/_doublecolon_scroll-marker/index.md | 4 + .../css/css_overflow/css_carousels/index.md | 3 + files/en-us/web/css/css_overflow/index.md | 1 + .../web/css/scroll-marker-group/index.md | 4 + .../web/css/scroll-target-group/index.md | 456 ++++++++++++++++++ 6 files changed, 472 insertions(+) create mode 100644 files/en-us/web/css/scroll-target-group/index.md diff --git a/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md b/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md index 7dbfb863f0f274f..149c9789b943877 100644 --- a/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md +++ b/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md @@ -26,6 +26,9 @@ A scroll container's **`::scroll-marker-group`** pseudo-element represents a **s The scroll container must have its {{cssxref("scroll-marker-group")}} property set to a non-`none` value for the `::scroll-marker-group` pseudo-element to be generated. The {{cssxref("scroll-marker-group")}} value determines where the scroll marker group appears in the carousel's tab order and layout box order (but not DOM structure) — `before` puts it at the start, while `after` puts it at the end. +> [!NOTE] +> Alternatively, a scroll marker group can be created from an existing element container using {{cssxref("scroll-target-group")}}. + It is a best practice to match the visual rendering position of the scroll marker group with the tab order. When positioning the group at the start of the content, put it at the beginning of the tab order using `before`. When positioning the group at the end of the content, put it at the end of the tab order using `after`. Accessibility-wise, the scroll marker group and contained scroll markers are rendered with [`tablist`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role)/[`tab`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role) semantics. When you Tab to the group, it behaves like a single item (that is, another press of the Tab key will move past the group to the next item), and you can move between the different scroll markers using the left and right (or up and down) cursor keys. @@ -185,6 +188,7 @@ ul::scroll-marker-group { ## See also - {{cssxref("scroll-marker-group")}} +- {{cssxref("scroll-target-group")}} - {{cssxref("::scroll-button()")}} - {{cssxref("::scroll-marker")}} - {{cssxref("::column")}} diff --git a/files/en-us/web/css/_doublecolon_scroll-marker/index.md b/files/en-us/web/css/_doublecolon_scroll-marker/index.md index 9a6c3694e20aa0b..2cbeb3802d9c5a2 100644 --- a/files/en-us/web/css/_doublecolon_scroll-marker/index.md +++ b/files/en-us/web/css/_doublecolon_scroll-marker/index.md @@ -26,6 +26,9 @@ A `::scroll-marker` is generated on an element when the `::scroll-marker`'s {{cs The scroll container's `::scroll-marker-group` pseudo-element automatically contains any `::scroll-marker` pseudo-elements generated on the scroll container or 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 be used to navigate to their associated content items. +> [!NOTE] +> Alternatively, a scroll marker group can be created from an existing element container using {{cssxref("scroll-target-group")}}; any contained {{htmlelement("a")}} elements with fragment identifiers linking to sections of the page automatically behave like scroll markers. + Accessibility-wise, the scroll marker group and contained scroll markers are rendered with [`tablist`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role)/[`tab`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role) semantics. When you Tab to the group, it behaves like a single item (that is, another press of the Tab key will move past the group to the next item), and you can move between the different scroll markers using the left and right (or up and down) cursor keys. ## Examples @@ -189,6 +192,7 @@ To improve user experience, we set a different color on the markers on {{cssxref ## See also - {{cssxref("scroll-marker-group")}} +- {{cssxref("scroll-target-group")}} - {{cssxref("::scroll-button()")}} - {{cssxref("::scroll-marker-group")}} - {{cssxref(":target-current")}} diff --git a/files/en-us/web/css/css_overflow/css_carousels/index.md b/files/en-us/web/css/css_overflow/css_carousels/index.md index 7a4e14afa2564d3..88598ddda050588 100644 --- a/files/en-us/web/css/css_overflow/css_carousels/index.md +++ b/files/en-us/web/css/css_overflow/css_carousels/index.md @@ -257,6 +257,9 @@ ul { } ``` +> [!NOTE] +> Alternatively, a scroll marker group can be created from an existing element container using {{cssxref("scroll-target-group")}}. + Next, the list's `::scroll-marker-group` pseudo-element is positioned relative to the carousel using CSS anchor positioning, similar to the scroll button's, except that it is horizontally centered on the carousel using a {{cssxref("justify-self")}} value of `anchor-center`. The group is laid out using flexbox, with a {{cssxref("justify-content")}} value of `center` and a {{cssxref("gap")}} of `20px` so that its children (the `::scroll-marker` pseudo-elements) are centered inside the `::scroll-marker-group` with a gap between each one. ```css live-sample___first-example diff --git a/files/en-us/web/css/css_overflow/index.md b/files/en-us/web/css/css_overflow/index.md index b483cf874a07bcf..f7f72eb1defcb93 100644 --- a/files/en-us/web/css/css_overflow/index.md +++ b/files/en-us/web/css/css_overflow/index.md @@ -227,6 +227,7 @@ A link is included in the content box above to demonstrate the effects of keyboa - {{CSSxRef("overflow-y")}} - {{CSSxRef("scroll-behavior")}} - {{cssxref("scroll-marker-group")}} +- {{cssxref("scroll-target-group")}} - {{CSSxRef("scrollbar-gutter")}} - {{CSSxRef("text-overflow")}} diff --git a/files/en-us/web/css/scroll-marker-group/index.md b/files/en-us/web/css/scroll-marker-group/index.md index e3c1130ae0a7d08..05bf2006f165077 100644 --- a/files/en-us/web/css/scroll-marker-group/index.md +++ b/files/en-us/web/css/scroll-marker-group/index.md @@ -12,6 +12,9 @@ sidebar: cssref The **`scroll-marker-group`** [CSS](/en-US/docs/Web/CSS) property controls whether a {{glossary("scroll container")}} has a {{cssxref("::scroll-marker-group")}} pseudo-element generated and, if so, whether it should be placed immediately `before` _or_ `after` the container's contents in the default visual and tabbing order. +> [!NOTE] +> A scroll marker group can be created from an existing element container using {{cssxref("scroll-target-group")}}. + ## Syntax ```css @@ -179,6 +182,7 @@ Note the placement of the scroll marker group. Check out how the keyboard tabbin ## See also +- {{cssxref("scroll-target-group")}} - {{cssxref("::scroll-button()")}} - {{cssxref("::scroll-marker-group")}} - {{cssxref("::scroll-marker")}} diff --git a/files/en-us/web/css/scroll-target-group/index.md b/files/en-us/web/css/scroll-target-group/index.md new file mode 100644 index 000000000000000..ade4a658f0009e9 --- /dev/null +++ b/files/en-us/web/css/scroll-target-group/index.md @@ -0,0 +1,456 @@ +--- +title: scroll-target-group +slug: Web/CSS/scroll-target-group +page-type: css-property +browser-compat: css.properties.scroll-target-group +sidebar: cssref +--- + +The **`scroll-target-group`** [CSS](/en-US/docs/Web/CSS) property specifies whether a container element is a scroll marker group. + +## Syntax + +```css +/* Keyword values */ +scroll-target-group: auto; +scroll-target-group: none; + +/* Global values */ +scroll-target-group: inherit; +scroll-target-group: initial; +scroll-target-group: revert; +scroll-target-group: revert-layer; +scroll-target-group: unset; +``` + +The `scroll-target-group` property is specified as one of the keyword values listed below. + +### Values + +- `auto` + - : The element is a scroll marker group. +- `none` + - : The element is not a scroll marker group. + +## Description + +Setting `scroll-target-group: auto` on a container element denotes it as a scroll marker group, which is a group of navigation items that allow you to navigate between elements on a page (such as carousel items or article sections) and are highlighted to indicate which element is currently in view. + +Any {{htmlelement("a")}} elements with fragment identifiers inside the container are automatically set as scroll markers. The anchor element whose scroll target is currently in view can be styled via the {{cssxref(":target-current")}} pseudo-class. + +Scroll marker groups created using `scroll-target-group` behave in a very similar way to those created using the {{cssxref("scroll-marker-group")}} property, with some differences: + +- `scroll-marker-group` automatically creates a set of pseudo-elements to represent the group ({{cssxref("::scroll-marker-group")}}) and markers (one or more instances of {{cssxref("::scroll-marker")}}), and they automatically have the expected navigation associations made with the {{glossary("scroll container")}} the group is generated on. This is quicker to set up, and you don't need to create markup for the group and markers, but creating your own markup and setting it as a scroll marker group via `scroll-target-group` provides more control and flexibility. +- A group generated with `scroll-marker-group` automatically has [`tablist`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role)/[`tab`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role) semantics applied to it, meaning that it behaves like a single item in the tab index, and you can move between scroll markers using cursor keys. The markers of a group specified using `scroll-target-group` behave like individual links by default, but you have the flexibility of providing alternative semantics and behavior if wished. + +## Formal definition + +{{cssinfo}} + +## Formal syntax + +{{csssyntax}} + +## Examples + +### Basic `scroll-target-group` usage + +This example provides a basic page of content with a table of contents to link to different sections. + +#### HTML + +Our markup has a series of {{htmlelement("section")}} elements containing content, and a table of contents created using an ordered list ({{htmlelement("ol")}}/{{htmlelement("li")}}) and {{htmlelement("a")}} elements. + +```html + +
+

Prose of the century

+

+ I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea + narwhal asymmetrical. Af health goth shaman in slow-carb godard echo park. + Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free + poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level + jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor + lumbersexual before they sold out dreamcatcher single-origin coffee. +

+
+
+

Chapter 1

+ + +
+
+

Chapter 2

+ + +
+ + +``` + +```html hidden live-sample___basic-usage + +
+

My story

+

+ I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea + narwhal asymmetrical. Af health goth shaman in slow-carb godard echo park. + Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free + poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level + jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor + lumbersexual before they sold out dreamcatcher single-origin coffee. +

+
+
+

Chapter 1

+

+ I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea + narwhal asymmetrical. Af health goth shaman in slow-carb godard echo park. + Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free + poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level + jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor + lumbersexual before they sold out dreamcatcher single-origin coffee. +

+

+ Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore + bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon. + Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie artisan. + Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic photo booth + occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh occaecat umami four + loko adaptogen taiyaki truffaut hexagon neutral milk hotel. +

+

+ Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag + drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi blog, + vape hella seitan veniam. +

+
+
+

Chapter 2

+

+ Kombucha laborum tempor iceland pour-over. Keytar in echo park gorpcore + bespoke. Art party quinoa stumptown celiac, sed chillwave 3 wolf moon. + Scenester fugiat pariatur, seitan selvage excepteur chambray yuccie artisan. + Sunt schlitz ugh, et jawn sus four loko pop-up post-ironic photo booth + occaecat deep v 8-bit tacos marfa. Tattooed ipsum tbh occaecat umami four + loko adaptogen taiyaki truffaut hexagon neutral milk hotel. +

+

+ Chillwave gastropub chartreuse deserunt butcher umami meditation ennui. Sus + post-ironic affogato irony non succulents la croix labore tousled. Tumblr + selvage sartorial taxidermy yes plz fashion axe deserunt. Big mood + humblebrag hammock meditation, four dollar toast vice bruh minim tacos + chartreuse drinking vinegar sunt yes plz YOLO cred. Synth chartreuse est, + wayfarers pop-up ut gorpcore consequat ullamco meh lyft crucifix selvage + occaecat. +

+
+
+

Chapter 3

+

+ Chillwave gastropub chartreuse deserunt butcher umami meditation ennui. Sus + post-ironic affogato irony non succulents la croix labore tousled. Tumblr + selvage sartorial taxidermy yes plz fashion axe deserunt. Big mood + humblebrag hammock meditation, four dollar toast vice bruh minim tacos + chartreuse drinking vinegar sunt yes plz YOLO cred. Synth chartreuse est, + wayfarers pop-up ut gorpcore consequat ullamco meh lyft crucifix selvage + occaecat. +

+

+ I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea + narwhal asymmetrical. Af health goth shaman in slow-carb godard echo park. + Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free + poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level + jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor + lumbersexual before they sold out dreamcatcher single-origin coffee. +

+
+
+

Chapter 4

+

+ Austin mukbang scenester pabst, kale chips helvetica in selvage tote bag + drinking vinegar craft beer pickled meh subway tile +1. Big mood kogi blog, + vape hella seitan veniam. +

+

+ I'm baby xOXO bespoke cupidatat PBR&B, affogato cronut 3 wolf moon ea + narwhal asymmetrical. Af health goth shaman in slow-carb godard echo park. + Tofu farm-to-table labore salvia tote bag food truck dolore gluten-free + poutine kombucha fanny pack +1 franzen lyft fugiat. Chicharrones next level + jianbing, enamel pin seitan cardigan bruh snackwave beard incididunt dolor + lumbersexual before they sold out dreamcatcher single-origin coffee. +

+
+``` + +#### CSS + +We've hidden most of the styling for brevity. Most pertinently to this example, we've set `scroll-target-group: auto` on the `
    ` to turn it into a scroll marker group and trigger the browser's algorithm for calculating which `` element is the `:target-current` at any moment in time (that is, which link's target is currently in view). We then style the `:target-current` pseudo-class with a {{cssxref("color")}} of red so that it is clearly visible. + +```css hidden live-sample___basic-usage +body { + font: 1.2em / 1.5 system-ui; + width: 50%; + max-width: 700px; + margin: 0 auto; +} + +nav { + position: fixed; + top: 0; + left: 0; + right: 0; + display: flex; + justify-content: center; +} + +section { + padding-top: 60px; +} + +a { + color: black; + text-decoration: none; +} + +a:hover, +a:focus { + text-decoration: underline; +} + +ol { + display: flex; + width: 100%; + justify-content: space-around; + list-style-type: none; + padding: 20px 0; + margin: 0; + background: white; +} +``` + +```css live-sample___basic-usage +ol { + scroll-target-group: auto; +} + +:target-current { + color: red; +} +``` + +#### Result + +Try navigating by activating the links and by scrolling. You'll see that in each case, the red highlight moves between the links to match the section currently being shown. + +{{ EmbedLiveSample("basic-usage", "100%", 500) }} + +### CSS carousel with `scroll-target-group` scroll markers + +This example shows how to create [CSS carousel](/en-US/docs/Web/CSS/CSS_overflow/CSS_carousels) scroll markers using `scroll-target-group`. The code for this example is similar to our [Carousel with single pages](/en-US/docs/Web/CSS/CSS_overflow/CSS_carousels#carousel_with_single_pages) example; we'll just explain the differences below. + +#### HTML + +The markup has IDs set on the list items that define each page, and an ordered list added that we'll turn into a scroll marker group using CSS. + +```html live-sample___carousel +

    CSS carousel single item per page

    +
      +
    • +

      Page 1

      +
      • +
    • +

      Page 2

      +
      • +
    • +

      Page 3

      +
      • +
    • +

      Page 4

      +
      • +
    +
      +
    1. 1
      2. +
    2. 2
      3. +
    3. 3
      4. +
    4. 4
      5. +
    +``` + +#### CSS + +We create the scroll marker group and scroll markers by setting `scroll-target-group` on the `
      ` element. The rest of the code for styling the scroll marker group and scroll markers is very similar, except that we are targeting elements of our own choosing (`
        ` and ``) rather than the {{cssxref("::scroll-marker-group")}} and {{cssxref("::scroll-marker")}} pseudo-elements. + +We complete the code by targeting some styles on the `:target-current`, `a:hover`, and `a:focus` states to indicate which page is currently being shown and which links are being hovered/focused. + +```css hidden live-sample___carousel +/* General styles */ + +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + text-align: center; +} + +button { + background-color: white; +} + +/* General styling of list as scrolling carousel */ + +ul { + width: 100%; + height: 400px; + padding: 20px; + gap: 4%; + display: grid; + grid-auto-flow: column; + grid-auto-columns: 100%; + overflow-x: scroll; + scroll-snap-type: x mandatory; +} + +ul li { + list-style-type: none; + background-color: #eee; + border: 1px solid #ddd; + padding: 20px; + + scroll-snap-align: center; +} + +/* CSS scroll buttons */ + +/* Style the scroll buttons */ + +ul::scroll-button(*) { + border: 0; + font-size: 2rem; + background: none; + color: rgb(0 0 0 / 0.7); + cursor: pointer; +} + +ul::scroll-button(*):hover, +ul::scroll-button(*):focus { + color: rgb(0 0 0 / 1); +} + +ul::scroll-button(*):active { + translate: 1px 1px; +} + +ul::scroll-button(*):disabled { + color: rgb(0 0 0 / 0.2); +} + +ul::scroll-button(left) { + content: "◄"; +} + +ul::scroll-button(right) { + content: "►"; +} + +/* Position the scroll buttons */ + +ul { + anchor-name: --myCarousel; +} + +ul::scroll-button(*) { + position: absolute; + position-anchor: --myCarousel; +} + +ul::scroll-button(left) { + right: calc(anchor(left) - 70px); + top: calc(anchor(bottom) - 80px); +} + +ul::scroll-button(right) { + left: calc(anchor(right) - 70px); + top: calc(anchor(bottom) - 80px); +} +``` + +```css live-sample___carousel +ol { + position: absolute; + position-anchor: --myCarousel; + top: calc(anchor(bottom) - 90px); + justify-self: anchor-center; + display: flex; + justify-content: center; + gap: 20px; + + list-style-type: none; + padding: 0; + scroll-target-group: auto; +} + +ol a { + width: 28px; + height: 28px; + display: inline-block; + text-align: center; + text-decoration: none; + padding-top: 4px; + color: black; + background-color: transparent; + border: 2px solid black; + border-radius: 50%; +} + +ol a:hover, +ol a:focus, +:target-current { + background-color: black; + color: white; +} +``` + +#### Result + +Try navigating by activating the scroll marker links, scrolling, and pressing the scroll buttons. You'll see that in each case, the highlight moves between the links to match the section currently being shown. + +{{ EmbedLiveSample("carousel", "100%", 500) }} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{cssxref("scroll-marker-group")}} +- {{cssxref("::scroll-marker-group")}} and {{cssxref("::scroll-marker")}} pseudo-elements +- {{cssxref(":target-current")}} pseudo-class +- [Creating CSS carousels](/en-US/docs/Web/CSS/CSS_overflow/CSS_carousels) +- [CSS overflow](/en-US/docs/Web/CSS/CSS_overflow) module From 3514a7d4746dc6e5e9868fc8259c09e1091bf5dd Mon Sep 17 00:00:00 2001 From: Chris Mills Date: Tue, 26 Aug 2025 10:13:56 +0100 Subject: [PATCH 2/2] Fixes for danielsakhapov review comments --- .../_doublecolon_scroll-marker-group/index.md | 14 ++++++------ .../css/_doublecolon_scroll-marker/index.md | 6 ++--- .../css/css_overflow/css_carousels/index.md | 10 ++++----- .../web/css/scroll-marker-group/index.md | 8 +++---- .../web/css/scroll-target-group/index.md | 22 +++++++++---------- files/sidebars/cssref.yaml | 2 +- 6 files changed, 31 insertions(+), 31 deletions(-) diff --git a/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md b/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md index 149c9789b943877..6aba4e3b50ceb10 100644 --- a/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md +++ b/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md @@ -22,16 +22,16 @@ The **`::scroll-marker-group`** [CSS](/en-US/docs/Web/CSS) [pseudo-element](/en- ## Description -A scroll container's **`::scroll-marker-group`** pseudo-element represents a **scroll marker group**. This is a container that automatically contains any {{cssxref("::scroll-marker")}} pseudo-elements generated on itself or its descendants. This allows them to be positioned and laid out as a group, and is typically used when creating a CSS carousel to provide a scroll position indicator. The individual scroll markers can be used to navigate to their associated content items. +A scroll container's **`::scroll-marker-group`** pseudo-element represents a **scroll marker group container**. This is a container that automatically contains any {{cssxref("::scroll-marker")}} pseudo-elements generated on itself or its descendants. This allows them to be positioned and laid out as a group, and is typically used when creating a CSS carousel to provide a scroll position indicator. The individual scroll markers can be used to navigate to their associated content items. -The scroll container must have its {{cssxref("scroll-marker-group")}} property set to a non-`none` value for the `::scroll-marker-group` pseudo-element to be generated. The {{cssxref("scroll-marker-group")}} value determines where the scroll marker group appears in the carousel's tab order and layout box order (but not DOM structure) — `before` puts it at the start, while `after` puts it at the end. +The scroll container must have its {{cssxref("scroll-marker-group")}} property set to a non-`none` value for the `::scroll-marker-group` pseudo-element to be generated. The {{cssxref("scroll-marker-group")}} value determines where the scroll marker group container appears in the carousel's tab order and layout box order (but not DOM structure) — `before` puts it at the start, while `after` puts it at the end. > [!NOTE] -> Alternatively, a scroll marker group can be created from an existing element container using {{cssxref("scroll-target-group")}}. +> Alternatively, a scroll marker group container can be created from an existing element containing a set of {{htmlelement("a")}} elements using {{cssxref("scroll-target-group")}}. -It is a best practice to match the visual rendering position of the scroll marker group with the tab order. When positioning the group at the start of the content, put it at the beginning of the tab order using `before`. When positioning the group at the end of the content, put it at the end of the tab order using `after`. +It is a best practice to match the visual rendering position of the scroll marker group container with the tab order. When positioning the group at the start of the content, put it at the beginning of the tab order using `before`. When positioning the group at the end of the content, put it at the end of the tab order using `after`. -Accessibility-wise, the scroll marker group and contained scroll markers are rendered with [`tablist`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role)/[`tab`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role) semantics. When you Tab to the group, it behaves like a single item (that is, another press of the Tab key will move past the group to the next item), and you can move between the different scroll markers using the left and right (or up and down) cursor keys. +Accessibility-wise, the scroll marker group container and contained scroll markers are rendered with [`tablist`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role)/[`tab`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role) semantics. When you Tab to the group, it behaves like a single item (that is, another press of the Tab key will move past the group to the next item), and you can move between the different scroll markers using the left and right (or up and down) cursor keys. ## Examples @@ -148,9 +148,9 @@ li::scroll-marker:target-current { {{EmbedLiveSample("carousel-example", "100%", "280px")}} -### Positioning the scroll marker group with anchor-positioning +### Positioning the scroll marker group container with anchor-positioning -This example extends the previous one, demonstrating the use of [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) to position the scroll marker group relative to the carousel. +This example extends the previous one, demonstrating the use of [CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning) to position the scroll marker group container relative to the carousel. #### CSS diff --git a/files/en-us/web/css/_doublecolon_scroll-marker/index.md b/files/en-us/web/css/_doublecolon_scroll-marker/index.md index 2cbeb3802d9c5a2..43cb2814e6bd3f7 100644 --- a/files/en-us/web/css/_doublecolon_scroll-marker/index.md +++ b/files/en-us/web/css/_doublecolon_scroll-marker/index.md @@ -27,9 +27,9 @@ A `::scroll-marker` is generated on an element when the `::scroll-marker`'s {{cs The scroll container's `::scroll-marker-group` pseudo-element automatically contains any `::scroll-marker` pseudo-elements generated on the scroll container or 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 be used to navigate to their associated content items. > [!NOTE] -> Alternatively, a scroll marker group can be created from an existing element container using {{cssxref("scroll-target-group")}}; any contained {{htmlelement("a")}} elements with fragment identifiers linking to sections of the page automatically behave like scroll markers. +> Alternatively, a scroll marker group container can be created from an existing element container using {{cssxref("scroll-target-group")}}; any contained {{htmlelement("a")}} elements with fragment identifiers linking to sections of the page automatically behave like scroll markers. -Accessibility-wise, the scroll marker group and contained scroll markers are rendered with [`tablist`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role)/[`tab`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role) semantics. When you Tab to the group, it behaves like a single item (that is, another press of the Tab key will move past the group to the next item), and you can move between the different scroll markers using the left and right (or up and down) cursor keys. +Accessibility-wise, the scroll marker group container and contained scroll markers are rendered with [`tablist`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tablist_role)/[`tab`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tab_role) semantics. When you Tab to the group, it behaves like a single item (that is, another press of the Tab key will move past the group to the next item), and you can move between the different scroll markers using the left and right (or up and down) cursor keys. ## Examples @@ -60,7 +60,7 @@ We have a basic HTML {{htmlelement("ul")}} list with several {{htmlelement("li") We convert our `