최신 CSS 기능인 scroll-target-group과 :target-current를 활용하면 자바스크립트 없이 현재 보고 있는 섹션에 맞춰 목차 링크를 강조할 수 있다. 앵커 위치 지정 기능을 더하면 활성 항목까지 이어지는 선도 구현할 수 있지만, 스크롤 마커 기능은 현재 Chromium 기반 브라우저에서만 지원된다.

scroll-target-group: auto를 목차 링크를 감싸는 요소에 지정하면 브라우저가 각 링크와 해당 링크가 가리키는 섹션을 연결한다. 이어 :target-current로 현재 섹션에 해당하는 링크를 꾸밀 수 있고, :target-before와 :target-after를 쓰면 현재 항목 앞뒤의 링크를 서로 다르게 표시할 수 있다. 기존 HTML은 섹션으로 이동하는 일반 링크 목록이므로, 새 CSS를 지원하지 않는 브라우저에서도 기본 탐색은 가능하다.

활성 링크에 anchor-name을 지정하고 목차의 가상 요소에 앵커 위치를 설정하면 선의 끝을 현재 항목에 맞출 수 있다. 링크 수나 각 항목의 높이를 미리 정하지 않아도 되며, bottom 위치에 전환 효과를 주면 항목이 바뀔 때 선이 이어져 움직인다. 다만 bottom은 레이아웃 속성이어서 애니메이션 중 브라우저가 레이아웃을 다시 계산해야 한다. 제작자는 이를 transform이나 opacity처럼 컴포지터에 맡길 수 있는 속성과 구별되는 절충점으로 설명한다.

예제와 완성 데모는 원문과 CodePen에서 확인할 수 있다. 글은 스크롤 마커 기능이 Chromium 기반 브라우저에서 지원되며 Firefox와 Safari에서는 아직 지원되지 않는다고 밝힌다.

부록: 원문 예시

text
<ol>   <li><a href="#edge">Where the edge begins</a></li>   <li><a href="#stars">The stars that wander</a></li>   <li><a href="#gas">A sea of cold gas</a></li>   <li><a href="#gravity">Gravity has no border</a></li>   <li><a href="#bigger">The universe gets bigger</a></li> </ol> <article>   <h2 id="edge">Where the edge begins</h2>   <p></p>   <p></p>   <h2 id="stars">The stars that wander</h2>   <p></p>   <p></p> </article>