1. 소개
이 섹션은 규범적이지 않습니다.
이 CSS 모듈은 스크롤바의 시각적 스타일에 영향을 주는 속성들을 도입합니다. 색상(scrollbar-color) 및 두께(scrollbar-width) 등이 포함됩니다.
1.1. 범위
CSS Scrollbars 모듈은 스크롤바 컨트롤 자체의 스타일링을 위한 것으로, 예를 들어 Level 1에서는 색상과 너비에 관한 것이며, 스크롤바의 레이아웃이나 콘텐츠의 스크롤 가능성에 관한 것은 아닙니다. 레이아웃 영향 및 콘텐츠의 스크롤 가능성은 CSS Overflow 모듈에서 정의됩니다.
문서화된 사용 사례를 기반으로, 이 모듈이 해결하고자 하는 스크롤바와 관련된 주요 사용 사례는 세 가지입니다:
- 웹 애플리케이션 UI에 더 잘 어울리도록 스크롤바를 색상화합니다.
- 스크롤 영역이 작을 때 더 얇은 스크롤바를 사용합니다.
- UA에서 제공하는 스크롤바를 숨겨 스크롤을 위한 커스텀 인터페이스를 제공하면서 스크롤 가능성의 다른 측면에는 영향을 주지 않습니다.
1.1.1. 범위 외
스크롤바의 내부 구조, 레이아웃, 구성 및 색상에 대한 정밀한 제어는 범위에 포함되지 않습니다.
이는 플랫폼마다 스크롤바 구조와 스타일링 관례가 다르고,
운영체제들이 더 나은 사용자 경험을 위해 스크롤바 디자인을 지속적으로 발전시키기 때문입니다.
스크롤바의 특정 부분을 선택하기 위한 의사 요소(pseudo-elements) 예시도 고려되었으나 채택되지 않았습니다.
저자에게 이러한 세밀한 제어 권한이 유혹적일 수 있지만,
다양한 부분의 배열—
참고: 스크롤바 관련 ::-webkit- 접두사의 의사 요소를 웹에 노출하는 것은
CSS 작업 그룹과 Webkit 모두 실수로 간주합니다.
1.2. 값 정의
이 명세는 [CSS2]의 CSS 속성 정의 규약을 따르며, [CSS-VALUES-3]의 값 정의 문법을 사용합니다. 이 명세에 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합으로 이러한 값 타입의 정의가 확장될 수 있습니다.
각 속성 정의에 명시된 속성별 값 외에도, 이 명세에서 정의한 모든 속성은 CSS 전역 키워드도 속성 값으로 사용할 수 있습니다. 가독성을 위해 명시적으로 반복하지 않았습니다.
2. 스크롤바 색상: scrollbar-color 속성
| 이름: | scrollbar-color |
|---|---|
| 값: | auto | <color>{2} |
| 초기값: | auto |
| 적용 대상: | 스크롤 컨테이너 |
| 상속 여부: | yes |
| 백분율: | n/a |
| 계산된 값: | 명시된 키워드 또는 두 개의 계산된 색상 |
| 정규 순서: | 문법에 따름 |
| 애니메이션 타입: | 계산된 값 기준 |
이 속성은 요소의 스크롤바 색상을 설정할 수 있게 해줍니다.
UA는 루트 요소에 설정된 scrollbar-color 값을 뷰포트에 적용해야 합니다.
참고: overflow (및 overflow-*) 속성과 달리, HTML body 요소에 설정된 scrollbar-color 값은 뷰포트로 전파되지 않습니다.
- auto
- 사용자 에이전트가 스크롤바의 색상을 결정합니다. 플랫폼 관례를 따라야 하지만, color-scheme 또는 기타 문맥 정보를 참고하여 페이지에 더 적합하게 색상을 조정할 수 있습니다.
- <color>
- 첫 번째 색상은 스크롤바의 thumb에, 두 번째 색상은 스크롤바의 track에 적용합니다.
세부사항:
Track은 스크롤바의 배경을 의미하며, 보통 스크롤 위치와 관계없이 고정되어 있습니다.
Thumb은 스크롤바의 움직이는 부분을 의미하며, 일반적으로 track 위에 떠 있습니다.
이 속성이 auto가 아닌 값으로 계산될 경우, 구현체는 기본 플랫폼 UI 렌더링보다 단순한 스크롤바를 렌더링할 수 있으며, 그에 맞게 색상을 적용합니다.
참고: 때로는 UA가 네이티브 스크롤바의 색상을 커스터마이즈할 수 없는 경우가 있는데, 이는 구조나 네이티브 툴킷의 제어권 부족 때문일 수 있습니다. 위 설명에 따라 UA는 색상 지정이 가능한 방식으로 스크롤바를 대체할 수 있습니다.
(참고: 각 명명된 부분을 보여주는 다이어그램 추가 - 예시 http://www.howtocreate.co.uk/tutorials/scrlbar.html)
(참고: 페이지 스타일에 맞는 색상 스크롤바가 적용된 overflow 요소 예시, 지원하는 브라우저의 PNG 예시 추가)
기저 플랫폼에 해당 부분이 존재하지 않는 경우 구현체는 색상 지정 중 일부를 무시할 수 있습니다.
scrollbar-color 속성을 특정 색상 값으로 사용할 때, 저자는 지정한 색상 간 충분한 명도 대비가 있는지 확인해야 합니다. 키워드 값을 사용하는 경우 UA는 충분한 명도 대비가 있는 색상을 사용해야 합니다. WCAG 2.1 SC 1.4.11 비텍스트 대비 [WCAG21]를 참고하세요. UA는 사용자 선호 설정에 따라 이러한 대비 요구사항을 무시할 수 있습니다 (예를 들어, 사용자가 특정 스크롤바 색상/시스템 기본값을 항상 유지하도록 설정한 경우).
참고: 사용자가 스크롤바와 상호작용(예: 호버 또는 활성화)할 때, 구현체는 적용되는 스크롤바 색상을 변경할 수 있습니다.
참고: IE는 각 스크롤바 색상 속성에 대해 명명된 시스템 색상을 기본값으로 사용합니다. 관련 이슈 1956을 참고하세요.
다음 예제는 (https://www.w3.org/Style/Examples/007/scrollbars.en.html에서 파생) IE에서 스크롤바 색상을 재설정합니다.
html {
scrollbar-color: ThreeDFace Scrollbar;
}3. 스크롤바 두께: scrollbar-width 속성
| 이름: | scrollbar-width |
|---|---|
| 값: | auto | thin | none |
| 초기값: | auto |
| 적용 대상: | 스크롤 컨테이너 |
| 상속 여부: | no |
| 백분율: | n/a |
| 계산된 값: | 명시된 키워드 |
| 정규 순서: | 문법에 따름 |
| 애니메이션 타입: | 계산된 값 기준 |
이 속성은 요소의 스크롤바 두께를 지정할 수 있게 해줍니다.
스크롤바는 페이지와 상호작용하기 위한 필수 UI 메커니즘입니다. 운영체제는 이러한 컨트롤의 일관성을 통해 사용성이 향상될 수 있도록 하며, 특정 선호도나 필요를 가진 사용자는 OS나 UA 설정을 통해 스크롤바를 포함한 다양한 UI 구성 요소의 모양을 조정할 수 있습니다.
특정 UX 목표를 지원하기 위해 이 속성을 사용하는 것은 적절하지만, 그 외에는 사용자 선호 설정을 덮어쓰는 것은 삼가야 합니다.
- auto
-
구현체는 기본 스크롤바 너비를 사용해야 합니다.
참고: 대부분의 시스템에서는 전통적으로 다소 넓은 스크롤바에 해당합니다. 하지만 OS나 UA 설정을 통해 사용자는 기본값을 더 넓거나 더 좁게 변경할 수 있습니다.
- thin
-
구현체는 auto보다 더 얇은 스크롤바를 사용해야 합니다.
이는 플랫폼에서 제공하는 얇은 스크롤바의 변형이거나,
기본 스크롤바보다 얇은 커스텀 스크롤바일 수 있습니다.
스크롤바는 반드시 사용 가능할 만큼 충분히 넓어야 합니다.
(구현자는 WCAG 2.1 SC 2.5.5 대상 크기 [WCAG21]를 참고할 수 있습니다.)
참고: 사용자 에이전트는 좁은 스크롤바의 사용성을 보장하기 위해 다양한 전략을 사용할 수 있습니다. 예를 들어 오버레이 스크롤바의 경우, 사용자가 상호작용을 시도하면 동적으로 스크롤바를 확대할 수 있습니다. 터치스크린 기기의 사용자 에이전트는 손가락 탭 해석을 조정하여 작게 보이는 터치 타겟과 상호작용하기 쉽게 할 수 있습니다.
사용자 에이전트는 이 값을 무시하고 auto로 처리할 수 있습니다. 예를 들어 사용자가 UA 또는 OS 설정을 통해 얇은 스크롤바에 불편함을 표시한 경우 등입니다. (사용자 에이전트는 이러한 설정을 제공하는 것이 권장됩니다.)
참고: 일부 플랫폼은 기본적으로 매우 얇은 스크롤바만 제공하며, 더 얇게 만들 수 없는 경우가 있습니다. 그런 경우 이 값은 auto처럼 동작합니다.
- none
-
구현체는 어떤 스크롤바도 표시하지 않아야 하며,
해당 요소는 다른 방법으로 스크롤 가능해야 합니다.
이 값을 사용하면 마우스만 사용하는 사용자가 스크롤할 수 없게 될 수 있습니다. 저자는 스크롤 휠이 없어도 마우스만 사용하는 사용자가 숨겨진 콘텐츠에 접근할 수 있도록 해야 합니다.none을 사용하는 저자는 스크롤이 가능하고 더 많은 콘텐츠가 있음을 시각적으로 알릴 수 있는 대체/동등한 힌트를 제공해야 합니다.
참고: 요소를 오직 프로그래밍적으로만 스크롤해야 하고, 직접 사용자 조작으로 스크롤할 수 없는 상황에서는, 저자는 overflow: hidden을 scrollbar-width: none 대신 사용해야 합니다.
* { scrollbar-width : auto !important; } 이렇게 하면 저자 스타일과 관계없이 모든 스크롤바가 OS 및 UA 설정에 따라 크기가 조정됩니다.
UA는 루트 요소에 설정된 scrollbar-width 값을 뷰포트에 적용해야 합니다.
참고: overflow 속성(및 그 롱핸드)과 달리,
HTML
body
요소에 설정된 scrollbar-width 값은 뷰포트로 전파되지 않습니다.
참고: 이 명세는 스크롤바의 정확한 위치나 모양, 또는 나타나거나 사라지는 애니메이션 등은 정의하지 않습니다.
부록 A. 감사의 글
이 부록은 규범적이지 않습니다.
Tab Atkins와 Xidorn Quan의 사용 사례, 프로토타입 제작, 구현, 피드백에 감사드립니다. 접근성 검토와 기여(#3315)에 대해 Patrick H. Lauke에게 감사드립니다.
부록 B. 변경 사항
이 부록은 규범적이지 않습니다.
2021-12-02 작업 초안 이후 변경 사항
-
CR용 기본 문구 변경
2021-08-05 작업 초안 이후 변경 사항
-
좁은 스크롤바의 접근성과 관련하여 "should"를 "must"로 변경했습니다. (관련 이슈 6675 참고)
2018-09-25 최초 공개 작업 초안 이후 변경 사항
- #6538: light 및 dark 값을 제거하고 UA가 auto를 color-scheme 또는 기타 문맥 정보에 따라 조정할 수 있도록 변경함.
- #3237: scrollbar-color 계산 값이 명시된 키워드 또는 두 개의 계산된 색상으로 변경됨
- #4693: 범위 명확화: 스크롤바 컨트롤 자체의 스타일링만, 레이아웃이나 스크롤 가능성은 포함하지 않음
- #3315: scrollbar-color와 scrollbar-width에 대한 접근성 고려 사항 추가 및 갱신
부록 C. 보안 및 개인정보 관련 사항
이 부록은 규범적이지 않습니다.
보안 관련 사항
이 명세에 대해 보안과 관련된 특정 우려 사항은 확인되지 않았습니다.
개인정보 관련 사항
이 명세에 대해 개인정보와 관련된 특정 우려 사항은 확인되지 않았습니다.
자가 검토 질문지
-
이 명세가 개인 식별 정보와 관련이 있습니까?
아닙니다.
-
이 명세가 고가치 데이터와 관련이 있습니까?
아닙니다.
-
이 명세가 브라우징 세션 전반에 걸쳐 지속되는 새로운 상태를 도입합니까?
아닙니다.
-
이 명세가 웹에 지속적이고 교차 출처 상태를 노출합니까?
아닙니다.
-
이 명세가 원본에 현재 접근할 수 없는 다른 데이터를 노출합니까?
아닙니다.
-
이 명세가 새로운 스크립트 실행/로딩 메커니즘을 가능하게 합니까?
아닙니다.
-
이 명세가 원본이 사용자의 위치에 접근할 수 있게 합니까?
아닙니다.
-
이 명세가 원본이 사용자 장치의 센서에 접근할 수 있게 합니까?
아닙니다.
-
이 명세가 원본이 사용자의 로컬 컴퓨팅 환경의 일부 측면에 접근할 수 있게 합니까?
아닙니다.
-
이 명세가 원본이 다른 장치에 접근할 수 있게 합니까?
아닙니다.
-
이 명세가 원본이 사용자 에이전트의 네이티브 UI에 어느 정도 제어권을 부여합니까?
예. scrollbar-* 속성은 페이지가 사용자 에이전트의 네이티브 UI의 스크롤바 색상 및 너비를 변경할 수 있게 합니다. 예를 들어, 페이지의 창, 페이지에 포함된 프레임 콘텐츠, 또는 페이지 내 스크롤바가 있는 오버플로우 요소 등.
-
이 명세가 웹에 임시 식별자를 노출합니까?
아닙니다.
-
이 명세가 1자 및 3자 맥락에서 동작을 구분합니까?
아닙니다.
-
이 명세가 사용자 에이전트의 "시크릿 모드"에서 어떻게 동작해야 합니까?
차이 없습니다.
-
이 명세가 사용자 로컬 장치에 데이터를 저장합니까?
아닙니다.
-
이 명세에 "보안 관련 사항" 및 "개인정보 관련 사항" 섹션이 있습니까?
예.
-
이 명세가 기본 보안 특성을 다운그레이드할 수 있게 합니까?
아닙니다.
부록 D. 접근성 관련 사항
이 부록은 규범적이지 않습니다.
이런 경우에 이 속성을 사용하는 것이 저자가 스크립트나 독점 확장으로 커스텀 얇은 스크롤바를 만드는 것보다 바람직합니다. 왜냐하면 사용자가 이를 덮어쓸 수 있는 기회를 제공하기 때문입니다.
사용자 스타일 시트는 이러한 덮어쓰기를 제공하며, 추가적으로 사용자 에이전트는 사용자가 얇은 스크롤바 사용을 원하지 않음을 표현할 수 있는 설정을 제공하는 것이 권장됩니다.
CSS 작업 그룹은 일부 사용자가 일반적인 것보다 더 넓은 스크롤바가 필요함을 인지합니다. 운영체제 및 사용자 에이전트는 사용자가 이러한 선호를 표현할 수 있도록 해야 하며, 그런 경우 CSS는 해당 선택을 존중합니다.