CSS 전용 자동 팔로우 탐색 강조 표시

여러 섹션이 있는 큰 페이지( documentation sites for example )에는 스크롤한 섹션에 해당하는 항목을 강조 표시하는 플로팅 탐색이 있는 것이 일반적입니다. :has()를 사용하면 이제 JavaScript 없이도 이 작업을 수행할 수 있고 또 다른 CSS 트릭을 사용하여 이를 고정시킬 수 있습니다!

Nav:has(Auto-Follow) 기본 CSS 전용 구현

핵심 아이디어는 포인터가 읽고 있는 섹션/기사에 들어가고 해당 탐색 항목을 강조 표시하기 위해 :has() 선택기에서 해당 섹션의 :hover 상태를 사용할 수 있다는 것입니다. 이렇게:



이것은 :has()를 지원하는 브라우저에서만 작동하므로 다음과 같은 gif가 있습니다.

선택자 영어

nav:has(+ main section:nth-of-type(1):hover) li:nth-of-type(1)

탐색 요소li에서 첫 번째 요소nav를 가리킬 때 첫 번째 요소has를 선택합니다. 그런 다음 강조 표시된 li의 스타일을 설정합니다.

이 경우 스타일은 space toggle이 뒤바뀌어 트리거됩니다. 다음에 올 항목을 설정하는 데 도움이 되기 때문입니다. 있는 그대로의 기능에 만족한다면 강조 표시된 배경과 색상을 직접 설정할 수 있습니다.

Nav:has(Auto-Follow) 고급 CSS 전용 구현

이상적으로는 다른 섹션에 들어갈 때까지 강조 표시된 탐색 항목을 유지합니다. 덕분에 CSS만으로도 가능합니다!

참고: Floodgate에는 Houdini 사양의 일부인 맞춤 속성 애니메이션이 필요합니다. 따라서 :has() 지원 외에도 이 기술이 작동하는 유일한 브라우저는 Houdini와 :has()를 모두 구현한 Chrome Canary입니다.

라이브 데모는 다음과 같습니다.



그리고 gif로 보면 다음과 같습니다.

CSS에서 변경된 사항

대부분의 작은 추가 사항은 직접 복사하여 붙여넣지만 요약하면 다음과 같습니다.

@keyframes memory {
  0% { --cell: initial }
  1%, 100% { --cell: ; }
}

메모리 셀 공간 토글을 토글하는 첫 번째 애니메이션 키프레임은 채우기 모드가 진행되는 일시 중지된 상태에서 탐색의 li에 할당됩니다.

  animation: memory 1ms linear 1 forwards paused;

그런 다음 이전에 :has() 선택기로 강조 표시된 스타일을 설정했던 곳에서 이제 메모리 애니메이션 일시 중지를 해제합니다.+ main된다section이것은 우리를 위해 --cell: ; 하는 애니메이션이지만 호버링을 중지하면 애니메이션이 다시 일시 중지되지만 이제 채워진 정방향 상태이기 때문에 상태를 기억합니다.

그런 다음 마지막 변경 사항은 animation-play-state: running; 가 있는 다른 섹션을 가리키면 특정 nav li(강조 표시 지우기)에서 메모리를 재설정하는 것입니다. 그러기 위해서는 읽기가 조금 더 어려운 또 다른 :has() 셀렉터 세트를 작성해야 합니다...

새로운 영어 선택기

코드:

nav:has(+ main :is(
  section:hover ~ section:nth-of-type(2),
  section:nth-of-type(2) ~ section:hover
)) li:nth-of-type(2)

이전 선택기에서 복사-붙여넣기로 시작하여 내부--cell: ; 다음animation: none;이 유일한 변경 사항입니다.

영어로 탐색:has()이 n번째+ mainli가 nav'd 섹션에 대한 형제 요소인 형제 요소has이거나 n번째인 경우 + main에서 n번째section를 선택합니다. 섹션 다음에는 호버링된 섹션이 옵니다. 이러한 조건이 충족되면 강조 표시된 li의 스타일을 UN-set합니다(메모리 애니메이션 지우기).

첫 번째 섹션에 대해 이전에 가리키고 있는 섹션을 확인할 필요가 없으므로 선택기는 다음 이후에만 섹션을 확인하도록 단순화됩니다.

nav:has(+ main section:nth-of-type(1) ~ section:hover) li:nth-of-type(1)

마찬가지로 마지막 섹션은 호버링된 섹션을 찾을 필요가 없으므로 이전 섹션만 찾습니다.

nav:has(+ main section:hover ~ section:nth-of-type(4)) li:nth-of-type(4)

끝!

저는 개인적으로 JS에서 이와 동일한 논리를 몇 번 사용했습니다(해당 세부 사항 강조 표시, 해당 상태 잠그기, 이전 항목 지우기). 그래서 이 CSS 패턴이 다른 많은 상황에서도 유용한 아이디어가 될 것이라고 생각합니다.

이 아이디어/트릭이 깔끔하다고 생각하신다면 제가 항상 하는 일입니다! 그러니 여기에서도 저를 팔로우하는 것을 고려해 주세요!

💜
//제인 오리