w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.52k stars 672 forks source link

[css-overflow-5] What is the active :checked marker when some markers point to elements within different scrolling containers? #11098

Open flackr opened 1 month ago

flackr commented 1 month ago

With <a> elements, it is possible to link to any content anywhere on the page. This means that we can create a scroll marker group where multiple markers might be respectively active. E.g.

Nested scrollers might be used within sections of contents:

<div focusgroup>
  <ol>
    <li><a href="#s1">Section 1</a>
      <ol>
        <li><a href="#s1_1">Subsection 1</a></li>
      </ol>
    </li>
    <li><a href="#s2">Section 2</a>
      <ol>
        <li><a href="#s2_1">Subsection 1</a></li>
      </ol>
    </li>
  </ol>
</div>
<h1 id="s1">Section 1</h1>
<div class="scroller">
  <h2 id="s1_1">Subsection 1</h2>
</div>

Sibling / cousin scrollers (I'm less sure of the use case but it would need a defined behavior):

<div focusgroup>
  <ol>
    <li><a href="#i1">Item 1</a></li>
    <li><a href="#i2">Item 2</a></li>
  </ol>
</div>
<div class="scroller">
  <h1 id="i1">Item 1</h2>
</div>
<div class="scroller">
  <h1 id="i2">Item 2</h2>
</div>

In both of these cases there are many scroll markers which could be said to be :checked as their nearest ancestor scrolling element is currently scrolled to them.

flackr commented 1 month ago

I think to handle this in a general way we should find the common ancestor scrolling container (and tree of contained scrolling containers) of all of the scroll markers in the group, and then work from the top-down to first find the active scroller, then repeat within that until you arrive at a particular marker.

flackr commented 4 weeks ago

To make this proposal more concrete. The proposed way to select the active marker among targets in different scrolling containers is as follows:

Define/share an algorithm for determining the active target for a list of targets in a single scroller (which as discussed in #10917 will for now will be a bit flexible), To determine the active marker, we start from the root (or the nearest ancestor scrolling container) S. Then

  1. Let targets be all of the scroll targets whose scrolling container is S, and all of the scroll containers within S which have descendent scroll targets.
  2. Find the active target T amongst targets in S.
  3. If T is not a scroll target, let S = T and repeat from step 1.
  4. Return T as the active target.

This defines reasonable behavior that ensures a target is only active if all of its ancestor scrolling containers to the common ancestor scroll container are also in a position to be considered active (i.e. onscreen and more closely aligned than other targets).

fantasai commented 1 week ago

I think for the siblings case, we might want to allow multiple active scroll markers. For the ancestors case, probably requiring all ancestor scroll containers to be visible makes sense; but I'm not 100% sure if that necessarily means that the ancestors would be considered active if they were the target themselves.

tabatkins commented 5 days ago

Hm, for the ancestors case I've seen both behaviors; for example, in a ToC scroll indicator, I've seen both "just indicate the single most relevant entry" and "indicate the most relevant entry and all ancestors, since you're also in them"; I think the latter is sometimes done with a slightly different styling on the ancestors.

We might want to track and expose both of these concepts; select the single most relevant marker in a group and let it match :target-current, but also define a :target-current-all pseudo that'll match the current target, its ancestors (if they're also possible scroll markers in the group) and other scroll markers that could in theory be considered "relevant", except that another visible marker target is already considered more relevant.