[csswg-drafts] [css-overflow-5] Scroll-markers (#10720)

flackr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-overflow-5] Scroll-markers ==
This issue is to introduce scroll-markers, which is the main new feature proposed in #9745 for declarative creation of dynamic navigable scrolling user interfaces.

Anchor links to elements on the same page are effectively scroll markers, e.g. `<a href="#section1">Section 1</a>` is a scroll marker for section 1. In the [css-overflow-5](https://drafts.csswg.org/css-overflow-5/) spec, I propose a mechanism for automatic creation of scroll markers from content with pseudo-elements, as well as implicit grouping of and scroll tracking within groups of scroll markers.

## Pseudo-elements

### ::scroll-marker-group

A [scroll container](https://drafts.csswg.org/css-overflow-3/#scroll-container) can establish a pseudo-element for containing `::scroll-marker` pseudo-elements by setting the `scroll-marker-group` property to one of `before` or `after` signifying the order of the `::scroll-marker-group` in the tree, either before or after the scroll container. The `::scroll-marker-group` pseudo-element can be styled as the author wishes.

In order to ensure that placing `::scroll-marker` pseudo-elements into the `::scroll-marker-group` does not create cycles (e.g. change the layout in a way that affects the number of `::scroll-marker` pseudo-elements), the UA stylesheet applies `contain: size` to the group.

E.g.
```css
.scroller {
  scroll-marker-group: after;
}
.scroller::scroll-marker-group {
  border: 2px solid black;
  padding: 8px;
  height: 30px;
}
```

### ::scroll-marker

The author can then add a `::scroll-marker` style with a non-empty content attribute to any number of elements in the scrolling container to which navigation markers should be created. E.g.

```css
/* Creates circular scroll markers pointing to each section. */
section::scroll-marker {
  content: ' ';
  border: 2px solid gray;
  border-radius: 50%;
}
```

Combined with #10715, authors can create these dynamically for each generated fragment allowing the creation of automatically paginated content.

## Groups of scroll markers

A group of scroll markers is established automatically by `::scroll-marker-group`, and can be established manually for `<a>` elements by placing them into a containing element with the [focusgroup](https://open-ui.org/components/focusgroup.explainer/) attribute. E.g. the following demonstrates an inline table of contents establishing a scroll marker group:

```html
<ol focusgroup>
  <li><a href="#introduction">Introduction</a></li>
  <li><a href="#background">Background</a></li>
  ...
  <li><a href="#conclusion">Conclusion</a></li>
</ol>
```

Within each group, an active marker is determined based on the scroll position and can be styled by the developer using the `:checked` pseudo-class, e.g.

```css
a:checked {
  font-weight: bold;
}
```

In addition to being explicitly focused, whenever a scroll marker becomes active by scrolling, it sets the [last-focused element](https://open-ui.org/components/focusgroup.explainer/#last-focused-memory) of its focusgroup to itself. In combination with the [guaranteed tab stop](https://open-ui.org/components/focusgroup.explainer/#guaranteed-tab-stop) of focusgroups, this means that tabbing into a group of markers with tabindex -1 will focus the currently active marker. `::scroll-marker` pseudo-elements implicitly have a `tabindex` of -1 establishing this behavior.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10720 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 9 August 2024 14:50:07 UTC