light-dark, animation-timeline

light-dark

기존 (prefers-color-scheme 미디어 쿼리 이용)

body {
  color: black;
  background: white;
}

## 다크모드로 설정한 경우
@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background: black;
  }
}

light-dark 이용 - 색상을 지정하기 위해 두번씩 작성하지 않아도 됨

:root {
  ## 웹사이트가 지원하는 색 구성표를 지정
  color-scheme: light dark;
}
body {
  ## light mode 일 때 black, dark mode 일 때 white 
  color: light-dark(black, white);
  ## light mode 일 때 white, dark mode 일 때 black 
  background: light-dark(white, black);
}

• 브라우저별 지원 현황
  

animation-timeline

css 만으로 스크롤 애니메이션 구현 가능

.rectangle {
  animation: animateRect;
  animation-timeline: scroll();
}

animation-timeline 을 scroll() 로 설정하면 스크롤의 위치가 곧 애니메이션 진행률이 된다. (스크롤의 처음(0%)~스크롤의 마지막 위치 (100%))

• scroll 함수는 scroller 와 axis 를 파라미터로 받는데 각 타임라인 대상이 될 스크롤러 요소와 축 값을 받는다.

• 브라우저별 지원 현황
  

참고 문서

• https://youtu.be/vc4DGouf62E?si=H-ojNy7HJ6rg-FXD