color-scheme
- 웹사이트가 다크 모드를 지원함에도 스크롤바가 하얀색으로 밝게 빛나는 문제가 있음
-
color-scheme 속성을 dark light로 설정하면 브라우저에게 페이지가 다크 모드와 라이트 모드를 모두 처리할 수 있음을 알리고, 스크롤바도 어두워짐
- 메타 태그를 사용하여 문서에
color-scheme을 적용할 수 있으며, 이는 CSS를 로딩하기 전에 브라우저가 사용자의 선호도를 알 수 있게 함
-
prefers-color-scheme 미디어 기능과 함께 사용하면 사용자의 선호에 따라 변경할 부분을 완벽하게 제어할 수 있음
-
:has() 선택자를 사용하여 body에 dark 클래스가 있을 때 루트 요소에 color-scheme 속성을 적용할 수 있음
text-wrap
- 제목이나 캡션의 줄바꿈이 이상하게 되어 마지막 줄에 단어 하나만 오는 경우가 있음
-
text-wrap 속성에 balance 값을 사용하면 웹사이트의 제목을 균형 있게 만들 수 있음
- 이 기능은 브라우저에 구애받지 않으며, 현대적인 설정에서 잘 작동하면서 오래된 설정에서도 우아하게 성능이 저하됨
Scroll-margin
- 웹페이지에서 앵커 링크를 사용할 때, 고정된 헤더 때문에 대상 요소가 가려지는 문제가 발생함
-
scroll-margin CSS 속성을 사용하여 scroll-margin-top 값을 고정 헤더의 높이에 맞추면 이 문제를 해결 가능
-
:is 선택자를 사용하여 h2, h3, h4 등 여러 요소에 대해 동일한 처리를 적용할 수 있으며, ex나 lh와 같은 단위를 사용하여 동적 간격을 설정할 수 있음