기능 감지
CSS.supports()로 scroll-timeline 지원 여부를 확인합니다.
어디서나 동작합니다
최신 브라우저는 네이티브 CSS로, 나머지는 JS 폴백으로 처리합니다.
아래로 스크롤
화면 모서리의 배지로 지금 어느 모드인지 확인하세요.
점진적 향상
결과는 같고, 거쳐 가는 경로만 다릅니다.
부드러운 폴백
IntersectionObserver가 구형 브라우저에서 비슷한 효과를 냅니다.
콘텐츠 손실 없음
기본 상태가 "보이는 상태"라서, JS가 막혀도 글은 읽힙니다.
브라우저 커버리지
점진적 향상으로 모든 사용자에게 닿습니다.
100%
도달 가능한 사용자
~30%
네이티브 CSS 경로
~70%
JS 폴백 경로
감지 전략
CSS.supports('animation-timeline', 'scroll()')- 지원 여부에 따라 body에 클래스 추가
- 지원되면 CSS가, 아니면 JS가 처리
- 코드는 하나, 경험은 여러 갈래
폴백 구현
- 뷰포트 감지는 IntersectionObserver
- 클래스를 토글해 CSS 트랜지션 실행
- 진행률 바에만 스크롤 리스너 사용
- JavaScript 사용량을 최소로
권장 사항
- 정적으로 보이는 상태를 언제나 기본값으로 두기
- 기능 감지로 점진적으로 얹기
- 여러 브라우저에서 확인하기
prefers-reduced-motion존중하기