고대비 환경설정에 맞게 스크롤바 조정

운영체제나 브라우저에서 고대비 모드를 사용 설정하는 사용자는 UI 요소 (예: 스크롤바)가 매우 잘 보이기를 기대하며, 미묘한 회색이나 테마 색상보다는 명확한 전경-배경 분리에 의존하는 경우가 많습니다.

이 가이드에서는 @media (prefers-contrast: more) CSS 미디어 기능을 사용하여 고대비 스크롤바 스타일을 적용하는 방법에 관한 선택적 안내를 제공합니다.

가독성 향상

scrollbar-color 또는 맞춤 변수를 사용하여 스크롤바를 맞춤설정할 때 고대비 모드를 명시적으로 재정의할 수 있습니다. 이는 미적 이유로 기본 애플리케이션 테마에서 대비가 낮은 스크롤바를 사용하는 경우에 특히 유용합니다.

선택사항: @media (prefers-contrast: more) 블록을 사용하여 엄지손가락과 트랙에 어둡고 뚜렷한 색상을 정의합니다.

/* Define default standard colors as variables */
.scroller {
  --scrollbar-thumb: #bbb;
  --scrollbar-track: #f1f1f1;

  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
}

/* OPTIONAL: Provide clear, high-contrast overrides */
@media (prefers-contrast: more) {
  .scroller {
    /* Use extremely distinct colors like solid black against white */
    --scrollbar-thumb: #000000;
    --scrollbar-track: #ffffff;
  }
}

scrollbar-color 사용 시 주의해야 할 문제

• scrollbar-color에 애니메이션이나 전환을 적용하지 마세요. WebKit 버그로 인해 scrollbar-color가 변경될 때마다 스크롤바가 깜박입니다.
• macOS에서는 기본적으로 scrollbar-color (표준) 및 ::-webkit-scrollbar (기존) 속성이 무시됩니다. macOS는 네이티브 '오버레이' 스크롤바를 사용하기 때문입니다. macOS에서 렌더링하도록 하려면 맞춤 색상을 scrollbar-width(예: thin 또는 auto)과 페어링해야 합니다(MUST).
• scrollbar-width가 적용되어 있어도 macOS 오버레이 스크롤바는 기본적으로 트랙 (여백)을 투명하게 렌더링합니다. 디자인에서 MacOS에 표시되는 트랙 배경 색상이 필요한 경우 스크롤 가능한 컨테이너에 scrollbar-gutter: stable;를 적용해야 합니다(MUST). 단, 사용자가 스크롤바 위로 마우스를 가져간 후에만 표시됩니다.
• scrollbar-gutter: stable를 사용해도 MacOS에서 트랙이 투명할 수 있습니다. 엄지손가락은 트랙 색상에 따라 표시되지 않아야 합니다.

대체 및 브라우저 지원

scrollbar-color의 대체 및 브라우저 지원

이 기능은 점진적 개선이며 항상 대체가 필요한 것은 아닙니다.

스타일 지정이 중요하고 사용자의 기준 타겟이 '기준 널리 사용 가능' 이하인 경우 비표준 ::-webkit-scrollbar 가상 요소를 대체로 포함해야 합니다(SHOULD).

기존 대체 항목을 @supports not (scrollbar-color: auto) 블록으로 래핑하여 두 가지를 모두 기본적으로 지원하는 브라우저에서 표준 속성과 기존 WebKit 선택기 간의 충돌을 방지합니다.

맞춤 속성을 사용하여 색상을 정의하는 경우 기존 WebKit 선택기에 자동으로 적용됩니다. 중복으로 만들 필요는 없습니다.

/* Legacy fallback for WebKit/Blink browsers */
@supports not (scrollbar-color: auto) {
  .scroller::-webkit-scrollbar {
    /* Must define base size in WebKit for custom colors to be visual */
    width: 12px;
    height: 12px;
  }

  .scroller::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
  }

  .scroller::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
  }
}