Open flackr opened 2 months ago
I really like the idea of the scroll markers, although I am a bit wary of the dynamically created interactive elements, I'll copy the comment I did in the related thread from last December:
I don't like the idea of having the interactive elements created as pseudo-elements, or a need to manually place elements and then somehow associate them with the fragments etc.
But what if (wild idea incoming)… an ability to declare a
<template>
which would be used for every fragment? Maybe even with some built-in slot content that could be used, like for the markers, “page count” etc.
(there was a bit more to the discussion in the thread, I won't copy it fully)
However, regardless of how the actual dynamic scroll-markers will be implemented (maybe there is a way for the browsers to expose them in an accessible and extensible way), I think there is one thing about this proposal that we could implement right now — the idea of a :checked
pseudo-class for the current marker:
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.
This pattern is something that gets re-implemented over and over again, in our App I remember it appearing in different forms at least three times in the last 2 months.
I did also successfully implement this pattern with scroll-driven animations in the past: https://kizu.dev/scroll-driven-animations/#table-ofcontents-with-highlighted-current-sections — so it is already possible today (in Chrome) with just CSS. But it is very awkward to implement even with the scroll-driven animations, so having a native feature like this could be very useful.
Thus, my proposal: split the :current
state as something that could be the least questionable to implement (this could be a quick win), and continue discussing the dynamic scroll-markers themselves separately (as in my opinion there is much more to them that we need to think about, and I don't want them to stall what the :checked
could bring).
The CSS Working Group just discussed [css-overflow-5] Scroll-markers
.
Is the content
property required? I don't think the content
property is necessary if you don't need to generate text.
Is the
content
property required? I don't think thecontent
property is necessary if you don't need to generate text.
This is how you tell which elements generate scroll-markers. The initial content
value of none
for the ::scroll-marker
pseudo-element is how we know not to generate scroll-markers for every other element.
This is the same model as ::before
and ::after
, and given the scroll-marker should show something, using the content
property to activate it seems like a good pattern to follow making it obvious to the author if they show an empty string they should make it visible via styles.
The CSS Working Group just discussed [css-overflow-5] Scroll-markers
.
This issue is to introduce scroll-markers (explainer), 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 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 can establish a pseudo-element for containing
::scroll-marker
pseudo-elements by setting thescroll-marker-group
property to one ofbefore
orafter
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 appliescontain: size
to the group.E.g.
::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.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 attribute. E.g. the following demonstrates an inline table of contents establishing a scroll marker group: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.In addition to being explicitly focused, whenever a scroll marker becomes active by scrolling, it sets the last-focused element of its focusgroup to itself. In combination with the 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 atabindex
of -1 establishing this behavior.