CSS 기본 사용자 인터페이스 모듈 레벨 4

1. 소개

이 모듈은 작성자가 사용자 인터페이스 관련 속성과 값을 스타일링할 수 있는 CSS 속성들을 설명합니다.

CSS1의 섹션 2.1 [CSS1] 및 CSS2의 18장 [CSS21]에서는 여러 사용자 인터페이스 관련 속성과 값들이 도입되었습니다. CSS3 사용자 인터페이스(2000년 2월 16일)에서는 새로운 사용자 인터페이스 관련 기능들이 추가되었습니다.

[CSS-UI-3]는 이후에 이러한 내용들을 통합, 확장, 대체하기 위해 도입되었습니다. 이 명세는 이러한 작업을 이어가며 [CSS-UI-3]을 대체합니다.

1.1. 목적

이 명세의 목적은 다음과 같습니다:

• [CSS21] 및 [CSS-UI-3]의 사용자 인터페이스 기능을 확장합니다.
• HTML의 다른 동적 표현 관련 기능을 보강하거나 대체할 수 있는 추가 CSS 메커니즘을 제공합니다.
• 방향 탐색 모델을 사용하는 사용자 인터페이스 구축을 돕기 위해 방향성 탐색 속성을 도입합니다.

2. 모듈 상호작용

이 문서는 이전 명세에는 없던 새로운 기능들을 정의합니다. 또한 [CSS-UI-3]를 대체하며, 이는 아래의 내용을 대체했습니다:

• 섹션 18.1, 섹션 18.4, 그리고 Cascading Style Sheets, level 2, revision 1 부록 E에 정의된 윤곽선의 스택 정보 [CSS21]
• CSS3 사용자 인터페이스(2000년 2월 16일) [CSS-UI-3]

참고: box-sizing 속성은 이전에는 이 명세의 해당 섹션에서 정의되었으나, CSS Sizing 3 §3.3 Box Edges for Sizing: the box-sizing property로 이동되었습니다.

참고: text-overflow 속성도 이전에는 이 명세의 해당 섹션에서 정의되었으나, CSS Overflow 3 §4.1 Overflow Ellipsis: the text-overflow property로 이동되었습니다.

2.1. 값 정의

이 명세는 CSS21의 [CSS21] CSS 속성 정의 규칙을 따르며, CSS-VALUES-3의 값 정의 문법을 사용합니다 [CSS-VALUES-3]. 이 명세에서 정의되지 않은 값 유형들은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과의 조합으로 이러한 값 유형의 정의가 확장될 수 있습니다.

각 속성 정의에 명시된 속성별 값 외에도, 이 명세에서 정의된 모든 속성들은 CSS 전역 키워드도 값으로 허용합니다. 가독성을 위해 본문에 반복적으로 명시하지 않았습니다.

3. 윤곽선 속성

스타일시트 저자는 버튼, 활성 폼 필드, 이미지 맵 등과 같은 시각적 객체 주위에 윤곽선을 만들어 강조하고 싶을 수 있습니다. 윤곽선은 아래와 같이 테두리와 다릅니다:

1. 윤곽선은 공간을 차지하지 않습니다.
2. 윤곽선은 비직사각형일 수도 있습니다.
3. 사용자 에이전트는 :focus 상태의 요소에 종종 윤곽선을 렌더링합니다.

윤곽선 속성들은 이러한 동적 윤곽선의 스타일을 제어합니다.

이러한 윤곽선 렌더링의 스택 순서는 각 플랫폼별로 더 나은 사용자 경험을 제공하기 위해 명시적으로 구현에 맡깁니다. 이는 CSS 2.1 부록 E [CSS21]에 정의된 윤곽선 스택을 대체합니다.

키보드 사용자, 특히 페이지와 다른 방식으로 상호작용할 수 없는 장애인들은 :focus 상태의 요소에 윤곽선이 표시되는 것에 의존하므로, 작성자는 이러한 요소에서 윤곽선을 보이지 않게 할 경우 반드시 대체 강조 메커니즘을 제공해야 합니다.

윤곽선에 변형(transform)을 적용한 렌더링은 CSS3-UI에서 명시적으로 정의되지 않았습니다.

3.1. 윤곽선 단축 속성: outline 속성

3.2. 윤곽선 두께: outline-width 속성

3.3. 윤곽선 패턴: outline-style 속성

3.4. 윤곽선 색상: outline-color 속성

outline 속성으로 생성된 윤곽선은 박스 "위"에 그려집니다. 즉, 윤곽선은 항상 최상단에 위치하며, 박스의 위치나 크기, 혹은 다른 박스에 영향을 주지 않습니다. 따라서 윤곽선을 표시하거나 숨겨도 리플로우가 발생하지 않습니다.

윤곽선은 비직사각형일 수 있습니다. 예를 들어, 요소가 여러 줄에 걸쳐 분리되어 있을 경우, 윤곽선은 모든 요소의 박스를 감싸는 윤곽선 또는 최소한의 윤곽선 집합이어야 합니다.

윤곽선의 각 부분은 완전히 연결되어 있어야 하며, 일부 면이 열려 있으면 안 됩니다 (인라인 요소의 테두리가 줄이 끊어질 때처럼).

윤곽선의 부분들은 반드시 직사각형일 필요는 없습니다. 윤곽선이 border edge를 따를 경우, border-radius 곡선을 따라야 합니다.

윤곽선의 위치는 자식 박스에 의해 영향을 받을 수 있습니다.

사용자 에이전트는 포커스의 개념을 사용자에게 전달할 수 있는 적절한 영역을 감싸는 윤곽선을 결정하는 알고리즘을 사용해야 합니다.

참고: 이 명세는 윤곽선의 정확한 위치나 형태를 정의하지 않지만, 일반적으로 윤곽선은 border box 바로 바깥에 그려집니다.

outline-width 속성은 border-width와 동일한 값을 허용합니다 (CSS Backgrounds 3 §3.3 Line Thickness: the border-width properties).

<outline-line-style>는 <line-style>와 동일한 값을 허용합니다 (CSS Backgrounds 3 §3.2 Line Patterns: the border-style properties) 의미도 동일합니다. 단, hidden은 outline 스타일로 사용할 수 없습니다. 또한, outline-style 속성은 auto 값을 허용합니다. auto 값은 사용자 에이전트가 커스텀 윤곽선 스타일을 렌더링할 수 있도록 허용합니다. 일반적으로 플랫폼의 사용자 인터페이스 기본값이거나, CSS에서 자세히 설명할 수 없는 더 풍부한 스타일(예: 빛나는 효과의 반투명 외곽선 등)을 의미합니다. 이 명세에서는 outline-color와 outline-width가 auto 스타일 윤곽선을 렌더링할 때 어떻게 사용되는지(사용되는 경우) 정의하지 않습니다. 사용자 에이전트는 auto를 solid처럼 처리할 수 있습니다.

outline-color 속성은 모든 색상과 키워드 invert를 허용합니다. invert는 화면에 보이는 픽셀의 색상을 반전시키는 역할을 합니다. 이는 포커스 테두리가 배경색과 상관없이 눈에 띄게 하기 위한 일반적인 트릭입니다.

표준 UA는 invert 값을 화면 픽셀 색상 반전을 지원하지 않는 플랫폼에서는 무시할 수 있습니다.

UA가 invert 값을 지원하지 않는 경우, 해당 값은 파싱 단계에서 거부되어야 하며, outline-color 속성의 초기 값은 currentColor 키워드입니다.

outline 속성은 단축 속성이며, outline-style, outline-width, outline-color를 모두 설정합니다.

참고: 윤곽선은 모든 면에서 동일합니다. 테두리와 달리, outline-top, outline-left 등과 같은 속성은 존재하지 않습니다.

이 명세는 여러 겹쳐진 윤곽선이 그려지는 방식이나, 다른 요소 뒤에 일부 가려진 박스의 윤곽선이 그려지는 방식을 정의하지 않습니다.

button { outline: thick solid }

그래픽 사용자 인터페이스는 요소에 윤곽선을 사용하여 페이지에서 포커스된 요소를 사용자에게 알릴 수 있습니다. 윤곽선은 테두리와 별도로 표시되며, 윤곽선을 켜거나 끄는 것이 문서 리플로우를 유발해서는 안 됩니다. 포커스는 문서에서 사용자 상호작용의 대상이 되는 요소입니다 (예: 텍스트 입력, 버튼 선택 등).

:focus  { outline: thick solid black }
:active { outline: thick solid red }

참고: 윤곽선은 서식에 영향을 주지 않으므로 (즉, 박스 모델에 공간이 남지 않음), 페이지의 다른 요소와 겹칠 수 있습니다.

3.5. 윤곽선 오프셋: outline-offset 속성

기본적으로 윤곽선은 border edge 바로 바깥에서 그려집니다. 하지만, 윤곽선을 오프셋 하여 border edge 바깥으로 그릴 수도 있습니다.

outline-offset의 계산 값이 0이 아니면, 윤곽선은 border edge에서 해당 값만큼 바깥쪽으로 그려집니다.

:focus,:active  { outline-offset: 2px }

음수 값은 윤곽선이 border box 안쪽으로 줄어들게 해야 합니다. 윤곽선이 그리는 모양의 바깥쪽 높이와 너비는, 계산된 outline-width 값의 2배보다 작아지면 안 됩니다. 이렇게 하면 아주 큰 음수 값이어도 윤곽선을 렌더링할 수 있습니다. UA는 이 제약을 각 차원에 독립적으로 적용해야 합니다. 윤곽선이 여러 개의 분리된 모양으로 그려질 경우, 이 제약은 각 모양에 개별적으로 적용됩니다.

4. 크기 조정

CSS2.1은 블록 컨테이너 요소에서 스크롤 메커니즘(예: 스크롤바) 표시를 제어하는 방법을 제공합니다. 이 명세는 요소의 사용자 크기 조정 가능성과 텍스트 오버플로우 동작 지정 기능을 추가합니다.

4.1. 박스 크기 조정: resize 속성

resize 속성은 작성자가 요소가 사용자에 의해 크기 조정 가능한지 여부와, 가능하다면 어떤 축에서 조정 가능한지를 지정할 수 있게 해줍니다.

none

UA가 요소에 크기 조정 메커니즘을 제공하지 않으며, 사용자는 요소의 크기를 직접 조정할 수 있는 방법이 없습니다.

both

UA가 양방향 크기 조정 메커니즘을 제공하여 사용자가 요소의 높이와 너비 모두를 조정할 수 있게 합니다.

horizontal

UA가 가로 방향의 단일 크기 조정 메커니즘을 제공하여 사용자가 요소의 너비만 조정할 수 있게 합니다.

vertical

UA가 세로 방향의 단일 크기 조정 메커니즘을 제공하여 사용자가 요소의 높이만 조정할 수 있게 합니다.

block

UA가 block-axis 방향의 크기 조정 메커니즘을 제공하여 사용자가 요소의 block size만 조정할 수 있게 합니다.

inline

UA가 inline-axis 방향의 크기 조정 메커니즘을 제공하여 사용자가 요소의 inline size만 조정할 수 있게 합니다.

현재 요소의 스크롤 메커니즘(있을 경우)은 overflow 속성을 사용하여 제어할 수 있습니다 (예: overflow: scroll 및 overflow: hidden 등). resize 속성의 목적은 요소에 표시되는 크기 조정 메커니즘(예: 크기 조정 박스나 위젯)의 표시 및 동작을 제어할 수 있게 하는 것입니다.

참고: 크기 조정 메커니즘은 스크롤 메커니즘과 동일하지 않으며, UA의 확대/축소 기능과도 관련이 없습니다. 스크롤 메커니즘은 사용자가 요소의 내용 중 어느 부분을 표시할지 결정하게 해주고, 크기 조정 메커니즘은 사용자가 요소의 크기를 결정하게 해줍니다.

resize 속성은 계산된 overflow 값이 visible이 아닌 요소에 적용됩니다. UA는 overflow 속성 값과 상관없이 다음에도 적용할 수 있습니다:

• 이미지나 비디오와 같은 대체(replaced) 요소(img, video, picture, svg, object, canvas 등
• iframe 요소

resize 속성이 생성된 콘텐츠에 미치는 효과는 정의되어 있지 않습니다. 구현에서는 resize 속성을 생성된 콘텐츠에 적용하지 않아야 합니다.

참고: resize 속성은 Interface CSSPseudoElement 구현 시 향후 생성된 콘텐츠에도 적용될 수 있습니다.

사용자가 요소의 크기를 조정하면, 사용자 에이전트는 width 및 height 속성 값을 사용자가 지정한 크기에 맞게 px 단위로 style attribute DOM에 설정하며, 기존 속성 선언(있을 경우)을 대체합니다. !important가 있더라도 적용하지 않습니다.

요소가 한 방향만 크기 조정된 경우, 해당 속성만 설정되며, 두 속성이 모두 설정되지는 않습니다.

크기 조정 방향(예: 요소의 왼쪽 상단 변경 또는 오른쪽 하단 변경)은 절대 위치 지정, right 및 bottom 속성 사용 여부, 요소의 언어가 RTL인지 여부 등 여러 CSS 레이아웃 요소에 따라 달라질 수 있습니다. UA는 CSS 레이아웃에 따라 결정된 크기 조정 방향과 플랫폼의 관례 및 제약을 고려하여 사용자에게 크기 조정 메커니즘을 어떻게 보여줄지 결정해야 합니다.

UA는 min-width, max-width, min-height, max-height에서 부여하는 제약 외에는 사용자가 요소 크기를 자유롭게 조정할 수 있게 해야 합니다.

참고: 사용자가 요소 크기 조정을 시도했을 때 !important 선언 등으로 인해 해당 요소의 style attribute width 및 height 속성 값이 DOM에서 무시되거나 덮어써질 수 있습니다.

요소의 resize 속성의 계산 값 변경은 사용자가 해당 요소를 크기 조정하여 style attribute에 적용된 변경을 초기화하지 않습니다.

iframe,object[type^="text/"],
object[type$="+xml"],object[type="application/xml"]
{
  overflow:auto;
  resize:both;
}

5. 포인팅 장치와 키보드

5.1. 포인터 상호작용

5.1.1. 커서 스타일링: cursor 속성

이 속성은 포인팅 장치의 커서 핫스팟이 요소의 border edge 안에 있을 때 표시할 커서 유형을 지정합니다.

참고: CSS Backgrounds 3 §4.1 Curve Radii: the border-radius 속성에 따라 border edge는 border-radius의 영향을 받습니다.

겹쳐진 요소의 경우 어떤 요소가 커서 유형을 결정하는지는 히트 테스트에 따라 달라집니다: 클릭이 해당 위치에서 시작될 경우 이벤트를 받을 요소가 커서를 결정합니다.

참고: 히트 테스트의 구체적인 내용은 이 명세의 범위에 포함되지 않습니다. 히트 테스트는 차후 CSS나 HTML 개정판에서 정의될 예정입니다.

사용자 에이전트는 스크롤바, 크기 조정기, 기타 네이티브 UI 위젯 등 네이티브 UA 컨트롤 위에서는 cursor 속성을 무시할 수 있습니다. 또한 UA는 cursor 속성을 무시하고 페이지가 응답하지 않을 때 busy 커서나 텍스트 선택 중일 때 텍스트 커서 등 UA의 다양한 UI 상태를 나타내는 커서를 표시할 수 있습니다.

참고: [HTML]에서는 이미지 맵의 특별 처리를 cursor 속성에 대해 정의합니다.

값은 다음 의미를 가집니다:

이미지 커서

<url>

UA는 URI로 지정된 리소스에서 커서를 가져옵니다. UA가 커서 목록 중 첫 번째 커서를 지원하지 못하면 두 번째, 세 번째 커서를 순차적으로 시도해야 합니다. UA가 사용자 정의 커서를 모두 지원하지 못하면, 마지막에 있는 커서 키워드를 사용해야 합니다. 적합한 UA는 <url> 대신 <image>를 지원할 수 있으며, 이는 상위 집합입니다.

UA는 다음 이미지 파일 포맷을 반드시 지원해야 합니다:

• PNG ([PNG] 참조)
• SVG ([SVG11] 참조), secure static mode [SVG2]에서, natural size가 있는 경우
• 기타 UA가 <image>로 지원하는 비애니메이션 이미지 파일 포맷 (예: background-image 속성)

또한 UA는 다음 이미지 파일 포맷을 지원해야 합니다:

• SVG ([SVG11] 참조), secure animated mode [SVG2]에서, natural size가 있는 경우
• 기타 UA가 <image>로 지원하는 애니메이션 이미지 파일 포맷 (예: background-image 속성)

UA는 SVG([SVG11])를 secure static mode 또는 secure animated mode [SVG2]에서, natural size 없이도 추가 포맷으로 지원할 수 있습니다.

참고: CSS Working Group은 원래 모든 SVG(natural size 여부와 무관하게) 지원을 의도했으나, 구현 부족으로 비-natural size SVG 지원을 필수에서 선택으로 내렸습니다.

참고: 이 명세 작성 시점(2015년 봄) 기준, 일반 데스크탑 브라우저에서 커서로 지원되는 파일 포맷은 Microsoft에서 설계한 .ico, .cur 파일 포맷뿐입니다. 레거시 콘텐츠 호환성을 위해 UA는 이 포맷도 지원하는 것이 권장됩니다. 이 포맷에 대한 정보는 위키피디아에서 확인할 수 있습니다.

커서 이미지의 기본 객체 크기는 UA가 정의하며, 운영체제의 일반적인 커서 크기를 기준으로 해야 합니다.

커서 이미지의 구체 객체 크기는 기본 크기 알고리즘에 따라 결정됩니다. OS가 특정 크기 이상의 커서를 렌더링할 수 없는 경우, 커서 이미지는 OS가 지원하는 크기 범위 내로 축소해야 하며, natural aspect ratio는 유지해야 합니다.

선택적 <x> 및 <y> 좌표는 이미지 내에서 포인터 위치(핫스팟)의 정확한 위치를 식별합니다.

<x>

<y>

각각은 <number>입니다. 커서 좌표계(좌상단 기준)에서 정확히 가리키는 위치의 x, y 좌표입니다.

참고: 이 명세는 다양한 <image> 타입의 좌표계가 어떻게 설정되는지는 정의하지 않으며, [CSS4-IMAGES]에 위임합니다.

값이 명시되지 않으면 이미지 리소스 내에서 정의된 자연 핫스팟을 사용합니다. 값이 모두 명시되지 않고 참조된 커서에 정의된 핫스팟이 없는 경우, "0 0" 값을 지정한 것과 동일하게 처리됩니다.

이미지 리소스나 <x>, <y> 값으로 지정한 핫스팟 좌표가 커서 이미지 바깥에 있으면, 각각 독립적으로 범위 내로 맞춰야 합니다.

일반 목적 커서

auto

UA가 현재 상황에 따라 표시할 커서를 결정합니다. 구체적으로 auto는 선택 가능한 텍스트나 편집 가능한 요소 위에서는 text처럼, 나머지에서는 default처럼 동작합니다.

참고: 선택 가능한 텍스트나 편집 가능한 요소 위에서는, text와 마찬가지로, UA는 요소의 writing mode에 맞게 세로 또는 가로 텍스트 커서를 반드시 사용해야 하며, 변형(transform)이나 기타 시각 효과도 고려할 수 있습니다.

default

플랫폼에 따라 달라지는 기본 커서. 일반적으로 화살표로 렌더링됩니다.

none

해당 요소에는 커서가 표시되지 않습니다.

링크 및 상태 커서

context-menu

커서 아래의 객체에 컨텍스트 메뉴를 사용할 수 있음을 나타냅니다. 일반적으로 작은 메뉴 아이콘이 붙은 화살표로 렌더링됩니다.

help

커서 아래의 객체에 도움말을 사용할 수 있음을 나타냅니다. 일반적으로 물음표 또는 말풍선 모양으로 렌더링됩니다.

pointer

링크임을 나타내는 포인터 커서. 일반적으로 검지 손가락이 펴진 손모양으로 렌더링됩니다.

별도의 명시가 없는 한, UA는 모든 지원 문서 포맷의 하이퍼링크에 cursor: pointer를 UA 스타일시트에서 일반 선언(즉, !important 없이)으로 적용해야 합니다.

작성자는 링크에 pointer를 사용해야 하며, 그 밖의 인터랙티브 요소에도 사용할 수 있습니다.

progress

진행 상태 표시. 프로그램이 처리 중이지만, wait와 달리 사용자가 프로그램과 상호작용할 수 있습니다. 일반적으로 회전하는 원, 시계, 모래시계가 있는 화살표 등으로 렌더링됩니다.

wait

프로그램이 바쁘며 사용자가 기다려야 함을 나타냅니다. 일반적으로 시계나 모래시계로 렌더링됩니다.

선택 커서

cell

셀 또는 셀 집합을 선택할 수 있음을 나타냅니다. 일반적으로 가운데에 점이 있는 굵은 십자 모양으로 렌더링됩니다.

crosshair

단순 십자선(예: "+" 모양의 짧은 선분). 2차원 비트맵 선택 모드에 사용됩니다.

text

선택 가능한 텍스트임을 나타냅니다. 일반적으로 I-빔 형태로 렌더링됩니다. UA는 수평 writing mode의 요소에는 반드시 수직 I-빔/커서를, 수직 writing mode 요소에는 수평 I-빔/커서(예: vertical-text 키워드와 동일)를 자동으로 표시해야 합니다. UA는 또한 변형(see [CSS-TRANSFORMS-1])이나 경로 위 텍스트(SVG 2 §11.8 Text on a path 참조) 등 시각 효과를 고려해 수평 혹은 수직 커서 중 선택하거나, 임의 각도의 I-빔 커서를 표시할 수 있습니다.

vertical-text

선택 가능한 세로 텍스트임을 나타냅니다. 일반적으로 수평 I-빔으로 렌더링됩니다.

드래그 앤 드롭 커서

alias

무언가의 바로가기/바로가기 생성됨을 나타냅니다. 일반적으로 작은 곡선 화살표가 붙은 화살표로 렌더링됩니다.

copy

무언가가 복사됨을 나타냅니다. 일반적으로 작은 +가 붙은 화살표로 렌더링됩니다.

move

무언가가 이동됨을 나타냅니다.

no-drop

드래그한 항목을 현재 커서 위치에 놓을 수 없음을 나타냅니다. 일반적으로 선이 그어진 작은 원이 있는 손 또는 포인터로 렌더링됩니다.

not-allowed

요청한 동작이 수행되지 않음을 나타냅니다. 일반적으로 선이 그어진 원으로 렌더링됩니다.

grab

잡아서(드래그하여 이동) 할 수 있음을 나타냅니다. 일반적으로 펼친 손바닥 모양으로 렌더링됩니다.

grabbing

무언가가 잡혀(드래그되어 이동 중임) 있음을 나타냅니다. 일반적으로 손가락이 거의 닫힌 손바닥 모양으로 렌더링됩니다.

크기 조정 및 스크롤 커서

e-resize, n-resize, ne-resize, nw-resize, s-resize, se-resize, sw-resize, w-resize

어떤 엣지가 이동될 수 있음을 나타냅니다. 예를 들어 se-resize 커서는 박스의 남동쪽 모서리에서 움직임이 시작될 때 사용합니다.

ew-resize, ns-resize, nesw-resize, nwse-resize

양방향 크기 조정 커서임을 나타냅니다.

col-resize

항목/열이 가로로 크기 조정 가능함을 나타냅니다. 일반적으로 좌우 화살표와 그 사이에 세로 막대가 있는 형태로 렌더링됩니다.

row-resize

항목/행이 세로로 크기 조정 가능함을 나타냅니다. 일반적으로 상하 화살표와 그 사이에 가로 막대가 있는 형태로 렌더링됩니다.

all-scroll

어떤 방향으로든 스크롤할 수 있음을 나타냅니다. 일반적으로 상하좌우 화살표와 가운데 점이 있는 형태로 렌더링됩니다.

줌 커서

zoom-in, zoom-out

줌(확대/축소) 가능함을 나타내며, 각각 zoom-in, zoom-out에 대해 + 또는 -가 있는 돋보기 모양으로 자주 표현됩니다.

:link,:visited {
    cursor: url(example.svg#linkcursor),
      url(hyper.cur),
      url(hyper.png) 2 3,
      pointer
}

5.1.1.1. 캔버스의 커서

문서 캔버스는 문서가 렌더링되는 무한 표면입니다 [CSS21]. 어떤 요소도 캔버스에 직접 대응하지 않으므로, 요소 위가 아닌 곳에 커서 스타일링을 허용하기 위해, 캔버스 커서는 루트 요소의 커서를 재사용합니다. 단, 루트 요소에 박스가 생성되지 않은 경우 (예: 루트 요소가 display: none인 경우), 캔버스 커서는 플랫폼 의존 기본 커서입니다.

참고: 요소가 보이지 않더라도 박스는 생성될 수 있습니다. 예를 들어, 요소가 visibility: hidden이고 display: none은 아닌 경우, 박스가 생성되고 해당 커서가 캔버스에 사용됩니다.

5.2. 삽입 캐럿

5.2.1. 삽입 캐럿 색상 지정: caret-color 속성

auto

사용자 에이전트는 currentColor를 사용해야 합니다. 사용자 에이전트는 캐럿의 가시성과 주변 컨텐츠와의 명확한 대비를 보장하기 위해 currentColor, 배경, 그림자 등 다양한 요소에 따라 자동으로 캐럿 색상을 조정할 수 있습니다.

참고: caret-shape가 block인 경우, 명확한 대비와 가시성은 currentColor가 아닌 UA가 결정한 색상으로 가장 잘 구현됩니다.

<color>

삽입 캐럿이 지정한 색상으로 표시됩니다.

캐럿은 사용자가 텍스트(또는 그 외의 컨텐츠)를 입력할 때 요소 내 삽입 지점을 나타내는 가시적인 표시입니다. 이 속성은 그 표시의 색상을 제어합니다.

참고: UA에서 "캐럿"으로 취급되는 추가적인 요소들이 있을 수 있습니다. 예를 들어, 일부 UA는 "내비게이션 캐럿"을 표시할 수 있는데, 이는 삽입 캐럿과 유사하지만 편집 불가능한 텍스트에서도 이동할 수 있고 기능적으로 캐럿입니다. 반면, cursor 속성이 auto이거나 cursor가 text 또는 vertical-text일 때, 텍스트 위에 표시되는 커서 이미지는 캐럿처럼 보일 수 있지만 실제로는 캐럿이 아니라 커서입니다.

5.2.2. 삽입 캐럿의 형태: caret-shape

이 속성은 작성자가 텍스트 삽입 캐럿의 원하는 형태를 지정할 수 있게 합니다.

이 정의에서 character는 [UAX29]에서 정의된 확장 grapheme cluster로 이해해야 하며, visible character는 advance measure가 0이 아닌 문자를 의미합니다.

auto

UA가 캐럿의 형태를 결정합니다. 이는 플랫폼의 관례와 일치해야 하며, 상황에 따라 조정될 수 있습니다. 예를 들어, 사용자가 키보드의 insert 키를 눌러 삽입 모드/덮어쓰기 모드를 전환할 때, 삽입 모드에서는 bar 캐럿을, 덮어쓰기 모드에서는 block 캐럿을 보여줄 수 있습니다.

bar

UA는 텍스트 삽입 캐럿을 삽입 지점에 위치한 얇은 막대로 렌더링해야 합니다. 즉, character 사이, 앞, 뒤에 위치해야 하며, 그 위에 겹치지 않습니다. 인라인 진행 방향에 수직이어야 하며, 이탤릭 또는 오블리크 텍스트를 입력할 때는 경사진 막대로 렌더링할 수 있습니다.

block

UA는 텍스트 삽입 캐럿을 삽입 지점 뒤의 다음 visible character 위에 겹치는 사각형으로 렌더링해야 합니다. 삽입 지점 뒤에 visible character가 없으면, 마지막 visible character 뒤에 캐럿을 렌더링해야 합니다. 이탤릭 또는 오블리크 텍스트 입력 시 경사진 사각형으로 렌더링할 수 있습니다.

underscore

UA는 텍스트 삽입 캐럿을 삽입 지점 뒤의 다음 under ([CSS-WRITING-MODES-3] 참조) visible character 아래에 얇은 선으로 렌더링해야 합니다. 삽입 지점 뒤에 visible character가 없다면, 마지막 visible character 뒤에 캐럿을 렌더링해야 합니다.

block 및 underscore 캐럿의 너비는 삽입 지점 뒤의 다음 visible character의 advance measure이어야 하며, 다음 visible character가 없거나 이 정보를 알 수 없다면 1ch이어야 합니다.

캐럿의 방향과 모양을 결정할 때, UA는 반드시 writing mode [CSS-WRITING-MODES-3]를 고려하고, [CSS-TRANSFORMS-1] 변형을 적용해야 합니다. 편집 중인 텍스트가 경로 위에 배치된 경우(예: SVG textPath 요소 사용), UA는 이것도 고려해야 합니다.

bar 및 underscore 캐럿의 두께―그리고 유사하게 렌더링되는 auto 캐럿의 두께―는 사용자 에이전트가 결정합니다. 가능하다면, UA는 변환([CSS-TRANSFORMS-1] 등)으로 크기가 축소되어도 캐럿이 여전히 잘 보이도록 두께를 선택해야 합니다.

캐럿의 쌓임 위치(스태킹)는 다음의 제약 내에서 정의되지 않습니다:

• 캐럿은 요소의 배경에 의해 가려지면 안 됩니다.
• UA는 block 캐럿이 겹치는 문자가 캐럿에 의해 가려지지 않도록 렌더링해야 합니다.

.console {
  caret-shape: underscore;
  background: black;
  color: white;
  font-family: monospace;
  padding: 1ex;
}

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $  

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $

5.2.3. 삽입 캐럿 단축 속성: caret

이 속성은 caret-color와 caret-shape를 한 번에 설정하는 단축 속성입니다. 생략된 값은 초기값으로 설정됩니다.

5.3. 키보드 제어

5.3.1. 방향 포커스 내비게이션: nav-up, nav-right, nav-down, nav-left 속성

auto

사용자 에이전트는 방향성 내비게이션 입력에 따라 포커스를 이동할 요소를 자동으로 결정합니다.

<id>

<id> 값은 ID 선택자입니다 [SELECT]. 해당 속성에 대응하는 방향 내비게이션 입력이 있을 때, 포커스는 선택자에 일치하는 트리 순서상의 첫 번째 요소로 이동합니다.

이 값이 현재 포커스된 요소를 참조하면, 해당 nav- 속성에 대한 방향 내비게이션 입력은 무시됩니다 — 동일한 요소로 포커스 이동이 필요 없으므로.

선택자와 일치하는 요소가 없으면, 사용자 에이전트가 포커스를 이동할 요소를 자동으로 결정합니다.

포커스가 원래 포커스가 불가능한 요소로 이동하면, 방향성 내비게이션의 결과로만 포커스 가능해지고, 해당 기간 동안 :focus 의사 클래스가 해당 요소에 적용됩니다.

참고: "원래 포커스가 불가능"한 요소에 대한 다른 옵션으로, 문서 트리 내 다음 포커스 가능한 요소(해당 요소의 자손 포함)로 이동하는 방법도 고려 중입니다. 이러한 옵션에 대한 구현 경험이나 방향성 내비게이션 속성을 실제로 사용해 본 저자의 의견을 환영합니다.

<target-name>

<target-name> 매개변수는 포커스 내비게이션의 대상 프레임을 지정합니다. 이는 <string>이며, 반드시 언더스코어 "_" 문자로 시작하면 안 됩니다. 오류 처리: 만약 언더스코어로 시작하면, "_parent"는 상위 프레임으로 이동, "_root"는 root로 처리, 그 외 값은 해당 이름의 프레임이 있으면 그 프레임으로 이동합니다. 지정된 프레임이 없으면, 매개변수는 current 키워드로 처리되어 해당 요소가 있는 프레임을 사용합니다. root 키워드는 UA가 전체 창(window)을 대상으로 해야 함을 나타냅니다.

방향성 내비게이션 키가 있는 장치용 사용자 에이전트는 네 가지 방향 nav-* 속성(nav-up, nav-right, nav-down, nav-left)에 따라 포커스를 이동합니다. 이 명세는 어떤 키가 방향 내비게이션 키인지 정의하지 않습니다.

참고: 일반적으로 PC 키보드는 네 개의 화살표 키가 있습니다. 한 가지 구현 방법은 이 네 개의 화살표 키를 방향 내비게이션에 사용하는 것입니다. 접근성과 사용 편의를 위해, 사용자 에이전트는 키보드에서 어떤 키를 방향 내비게이션에 사용할지 설정할 수 있도록 해야 합니다.

button { position:absolute }

button#b1 {
  top:0; left:50%;
  nav-right:#b2; nav-left:#b4;
  nav-down:#b2; nav-up:#b4;
}

button#b2 {
  top:50%; left:100%;
  nav-right:#b3; nav-left:#b1;
  nav-down:#b3; nav-up:#b1;
}

button#b3 {
  top:100%; left:50%;
  nav-right:#b4; nav-left:#b2;
  nav-down:#b4; nav-up:#b2;
}

button#b4 {
  top:50%; left:0;
  nav-right:#b1; nav-left:#b3;
  nav-down:#b1; nav-up:#b3;
}

button#foo { nav-left: #bar "sidebar"; }

5.3.2. 사용되지 않음: ime-mode 속성

ime-mode는 일부 브라우저에서 어느 정도 구현되었으나 문제가 많고 이 명세 및 전 버전 [CSS-UI-3]에 의해 공식적으로 사용되지 않음으로 지정되었습니다.

이 속성의 비호환성 구현에 대한 문서가 있습니다.

사용자 에이전트는 ime-mode 속성을 지원해서는 안 됩니다.

작성자는 ime-mode 속성을 사용해서는 안 됩니다.

사용자는 잘못된 사이트나 레거시 구현을 우회해야 하는 경우에만 ime-mode 속성을 사용자 스타일 시트 규칙 등으로 사용할 수 있습니다. 예시:

input[type=password] {  ime-mode: auto !important;
}

이 CSS 예시는 사용자 스타일 시트 파일에 넣어, 비밀번호 입력란이 기본 동작을 하도록 강제할 수 있습니다.

이 명세는 레거시 ime-mode 구현의 기능이나 지원 내용을 문서화하지 않으며, 그 경로를 따르거나 추천하지 않습니다.

6. 사용자 상호작용

6.1. 콘텐츠 선택 제어

user-select 속성은 문서 내에서 사용자가 어떤 요소를 어떻게 선택할 수 있는지 지정할 수 있게 해줍니다. 모든 요소가 선택에 동일하게 유용하지 않을 때, 이 속성을 통해 더 쉬운 상호작용이 가능하며, 주변 콘텐츠가 실수로 선택되는 것을 방지할 수 있습니다.

사용자 에이전트는 user-select 속성을 ::first-line 및 ::first-letter 의사 요소에는 적용해서는 안 됩니다.

참고: UA는 ::before 및 ::after 의사 요소에는 이 속성을 적용할 수 있습니다. 이 경우 auto 값은 해당 의사 요소에서 used value가 none으로 매핑되지만, 다른 값들도 지정할 수 있습니다. 이는 생성된 콘텐츠가 선택 및 복사되지 않던 레거시 동작을 유지하는 것으로, 꾸밈 목적일 때 적절합니다. 하지만 이 속성을 통해 생성된 콘텐츠가 실제 콘텐츠 일부로 사용되는 경우(예: 문서 내 이슈 번호 등) 선택 및 복사가 가능해집니다. 가능한 한, 작성자는 생성된 콘텐츠를 장식 목적 외에는 사용하지 않고, 모든 콘텐츠를 DOM에 포함시키는 것을 우선시해야 합니다. 이 기능은 위험에 처해 있습니다.

user-select가 none 외의 값으로 바뀔 수 있게 하면, 복사 가능성 및 DOM API에서 어떤 의미가 되는지 정해야 합니다.

이 메커니즘을 통해 의사 요소의 생성 콘텐츠가 선택 가능해질 때, UA는 검색 기능에서도 이 콘텐츠를 찾을 수 있게 해야 합니다.

::marker에도 적용해야 할까? 페이지 마진 박스에도? auto의 used value도 none이어야 할까, 아니면 text가 더 적합할까?

used value는 computed value와 같으나, 다음과 같은 예외가 있습니다:

1. editable element에서, used value는 contain이어야 합니다. computed value와 관계없이
2. computed value가 auto인 경우, used value는 아래에서 정의된 다른 값 중 하나임

이 명세에서 editable element란 editing host이거나, mutable한 텍스트 기반 폼 컨트롤(예: textarea)을 의미합니다.

editing host의 editable 자손에서 used value가 어떻게 동작해야 하는지 제약이 있어야 할까? 의미가 명확하지 않다. 아마 none은 text로 매핑되어야 하거나, 모든 값이 text로 매핑되어야 할지도.

auto

auto의 used value는 다음과 같이 결정됩니다:

• ::before 및 ::after 의사 요소에서는 used value가 none
• 요소가 editable element인 경우, used value는 contain
• 그렇지 않으면, 부모 요소의 user-select의 all used value이면, used value는 all
• 그렇지 않으면, 부모 요소의 user-select의 none used value이면, used value는 none
• 그 외에는 used value가 text

참고: 상속되지 않는 속성에 초기값이 auto이고, used value가 부모 요소에 따라 달라지는 이 독특한 조합 덕분에 사실상 선택적 상속을 구현할 수 있게 됩니다. 이는 원래 MS IE에서 contain 값이 상속되지 않는 식의 동작을 도입하기 위해 제안되었습니다.

text

요소는 선택에 아무런 제약을 주지 않습니다.

none

UA는 해당 요소에서 선택을 시작할 수 없게 해야 합니다.

요소 외부에서 시작한 선택은 이 요소에서 끝나면 안 됩니다. 사용자가 그렇게 선택하려고 하면, UA는 선택 범위를 요소 경계에서 끝내야 합니다.

참고: 작성 시점의 실험적 구현들은 모두 이 방식대로 동작하지 않습니다. Firefox는 그렇게 동작합니다. Chrome과 Safari는 거의 맞지만, 요소 이후에서 시작해 역방향으로 선택할 때만 제대로 동작하고, 요소 이전에서 시작해 앞으로 선택할 때는 해당 요소 전체가 선택되는 식으로 동작합니다. IE는 요소 밖에서 시작한 선택이 요소로 들어가는 것을 전혀 막지 않습니다. Chrome과 Safari에서는 user-select: none 요소 내부에서 선택 시작 후 외부로 끝내면, 경계에서부터 지정한 끝점까지 선택이 만들어집니다. Firefox와 IE는 명세대로 선택이 전혀 만들어지지 않습니다.

단, 이 요소에 used value가 user-select가 none이 아닌 자손이 있으면, 이 자손 내부에서 시작하고 끝나는 선택은 허용됩니다.

UA는 이 요소를 포함해 선택이 확장되는 것을 허용하고, 해당 요소를 선택에서 제외해야 합니다. 단, 여러 선택 범위를 지원하지 않는 UA는 이 요소를 포함할 수 있습니다. 요소에 user-select: none이 아닌 자손이 있으면, 이 자손은 선택이 확장될 때 포함되어야 합니다. 이 명세는 클립보드의 동작에 대해 규범적 요구사항을 두지 않습니다. 하지만 UA는 시각적 선택과 복사될 내용이 일치하도록 하는 게 좋습니다. 선택되지 않은 텍스트가 복사되거나 그 반대가 되는 것은 사용자에게 매우 혼란을 줍니다.

user-select: none 요소에서 선택을 시작하려 하면(클릭이나 드래그 등), 기존 선택이 해제되거나 영향을 받아서는 안 됩니다.

user-select는 UI 편의 메커니즘이지, 복사 방지 메커니즘이 아니므로, UA는 user-select: none일 때도 사용자가 명시적으로 텍스트를 선택할 수 있는 대안을 제공할 수 있습니다.

참고: none은 복사 방지 수단이 아닙니다. 그렇게 쓰는 것은 효과가 없습니다: UA는 이를 우회할 방법을 제공할 수 있고, 이를 지원하지 않는 구형 UA에서는 아무 효과도 없으며, 사용자가 사용자 스타일 시트 등으로 비활성화할 수도 있습니다. 대신 none은 선택이 필요 없는 UI 요소에서 선택을 막아, 사용자가 원하는 콘텐츠를 더 쉽게 선택할 수 있도록 돕는 것입니다. CSS 검증기, 린터, 개발자 도구 등은 사용성과 저해하거나 사용자 기대에 어긋나는 잘못된 사용을 감지해 경고하는 휴리스틱을 적용하는 것이 권장됩니다.

작성자는 사용자를 불필요하게 제한하지 않도록 주의해야 합니다. 예를 들어, 루트 요소에 user-select: none을 설정하고, 일부만 선택 가능하게 풀어주는 것은 사용자를 불편하게 할 수 있습니다:

• 빈 영역 클릭으로 선택 해제가 더 이상 동작하지 않음

• 작성자가 선택 가능해야 할 영역을 놓칠 수 있음

• 나중에 페이지에 추가된 영역이 선택 가능하지 않게 될 수 있음

• 사용자가 주요 콘텐츠 외 다른 텍스트도 선택하고 싶을 수 있음 (예: 사전, 번역 도구, 경고/오류 검색 등)

대신, 작성자가 실수로 선택되기 쉬워 실제 동작에 방해가 될 만한 요소에만 user-select: none을 선택적으로 적용하는 것이 좋습니다. 상호작용 가능성이 낮은 영역을 선택 가능하게 남겨두는 쪽이 그 반대보다 훨씬 덜 불편을 초래합니다.

contain

UA는 이 요소에서 시작한 선택이 요소 밖으로 확장될 수 없게 해야 합니다.

요소 외부에서 시작한 선택은 이 요소에서 끝나면 안 됩니다. 사용자가 그렇게 선택하려 하면, UA는 선택 범위를 요소 경계에서 끝내야 합니다.

UA는 이 요소를 포함해 선택이 확장되는 것을 허용해야 하며, 그런 선택에는 요소의 콘텐츠가 반드시 포함되어야 합니다.

참고: 작성 시점의 실험적 구현들은 선택 시작/확장 동작이 서로 다릅니다. user-select: contain을 지원하지 않는 브라우저에서도 textarea 또는 contenteditable 요소에서 실험해볼 수 있습니다.

참고: 이 값은 원래 IE에서 실험적으로 user-select: element라는 이름으로 도입되었습니다.

all

요소의 콘텐츠는 원자적으로 선택되어야 합니다: 선택이 요소 일부만 포함하는 경우, 전체 요소와 모든 자손을 포함해야 합니다. 요소가 선택되고, 부모의 used value가 user-select가 all이면, 부모까지 선택에 재귀적으로 포함되어야 합니다.

해당 요소에 자손 중 used value가 user-select가 all이 아닌 경우가 있고, 선택이 그 자손 내에서만 이뤄지면, 해당 요소 전체를 포함하지 않아도 됩니다.

참고: 선택은 텍스트뿐 아니라 이미지, 표, 동영상 등도 포함할 수 있습니다. 복사/붙여넣기 시 동작은 이 명세의 범위에 포함되지 않습니다.

HTML용 UA 스타일시트에 다음과 같은 추가가 있습니다:

button, meter, progress, select { user-select: none; }

위 목록은 불완전하며, input 등 다양한 버튼류도 반드시 포함되어야 합니다.

레거시 콘텐츠 호환성을 위해, user-select를 지원하는 UA는 -webkit-user-select도 별칭(alias)으로 지원해야 합니다.

참고: 별칭 동작의 세부 구현은 UA에 맡깁니다. -webkit-user-select를 user-select의 단축 속성으로 처리하는 것이 효과적이며, 신규 구현자는 이를 고려해야 합니다. 하지만 -webkit-user-select를 user-select 별칭으로 다른 방식으로 지원하는 UA도 있으며, 이는 호환성에 문제를 일으키지 않으므로 명세는 유연성을 허용합니다.

7. 위젯 스타일링

7.1. 위젯 강조 색상: accent-color 속성

플랫폼마다 사용자 인터페이스 컨트롤들은 일반적으로 하나의 통일된 시각 스타일 아래에서 일관되게 디자인됩니다. 많은 플랫폼에서는(모두 그런 것은 아님) 강조 색상(accent color)을 사용합니다. 강조 색상은 일반적으로 밝고, 실용적인 배경 및 전경 색상과 뚜렷하게 대비되는 색상입니다. 모든 컨트롤이 모든 상태에서 강조 색상을 사용하는 것은 아니지만, 그래도 컨트롤 색상 구성의 핵심입니다.

accent-color CSS 속성은 작성자가 요소가 생성하는 사용자 인터페이스 컨트롤의 강조 색상을 지정할 수 있게 해줍니다. 값의 의미는 다음과 같습니다:

auto

UA가 선택한 색상으로, 플랫폼의 강조 색상과 일치해야 합니다(있다면).

<color>

강조 색상으로 사용할 색상을 지정합니다.

UA는 지정된 accent-color로, 원래 강조 색상으로 스타일링될 부분을 그려야 합니다. UA는 컨트롤의 가독성을 위한 명확한 대비를 유지해야 하며, 이를 위해 색상의 밝기나 명도를 조정하거나 컨트롤의 다른 부분에서 색상 대체를 할 수 있습니다 (예: 오버레이된 글리프가 color 대신 background-color를 사용). 그라데이션 등 플랫폼 관례에 맞는 강조 색상 변형도 생성할 수 있습니다.

라디오 버튼은 일반적으로 원으로 구성되고, 체크된 상태를 나타내는 "점"이 오버레이될 수 있습니다. 어떤 시각 스타일은 체크된 상태에 강조 색상을 사용합니다: 일부는 원의 배경에, 일부는 전경에 사용합니다.

두 경우 모두 accent-color 속성이 해당 컨트롤의 영향을 받는 부분을 스타일링합니다. 라디오 버튼에 강조 색상을 사용하지 않는 시각 스타일에서는 accent-color가 아무런 효과를 갖지 않습니다.

아래는 파란색 accent-color로 적합하게 렌더링된 라디오 버튼 예시입니다:

플랫폼	샘플	설명
Firefox 79 / Win		강조 색상 사용 안 함.
Chrome 81 / Win		강조 색상 사용 안 함.
Safari / Snow Leopard		강조 색상으로 체크 상태 "배경" 그라데이션 생성.
Safari 13 / Mac / Light		강조 색상을 체크 상태 "전경"으로 사용.
Safari 13 / Mac / Dark		강조 색상을 체크 상태 "전경"으로 사용.
Chrome 83 / Win / Light		강조 색상을 체크 상태 "전경"으로 사용.
Chrome 83 / Win / Dark		강조 색상을 체크 상태 "전경"에 사용, 다크 모드 배경에 대비 조정.

7.2. 외형 전환: appearance 속성

문서의 대부분 요소는 CSS로 완전히 제어할 수 있지만, 위젯은 일반적으로 UA가 호스트 OS의 네이티브 UI 컨트롤을 사용해 렌더링합니다. 이는 CSS로 복제하거나 스타일링할 수 없습니다.

이 명세의 위젯(widget) 용어는 네이티브 외형(native appearance)을 가질 수 있는 요소를 의미합니다. 즉, 호스트 OS나 플랫폼의 네이티브 위젯 또는 컨트롤과 유사하게 렌더링되거나, CSS로 표현할 수 없는 외형을 가진다는 뜻입니다. 어떤 요소가 네이티브 외형을 가질 수 있는지는 호스트 언어(예: HTML [HTML])에서 정의합니다.

이 명세는 appearance 속성을 도입하여 이 동작을 제어할 수 있게 합니다. 특히 appearance: none을 사용하면 작성자가 네이티브 외형을 가진 위젯의 외형을 없애고 CSS로 새롭게 스타일링할 수 있습니다.

input { appearance: none; }
input[type=checkbox] { appearance: checkbox; }

none

요소는 일반적인 CSS 규칙에 따라 렌더링됩니다. 위젯이 아닌 대체(replaced) 요소는 영향을 받지 않으며 그대로 대체 요소로 남습니다. 위젯은 네이티브 외형을 갖지 않아야 합니다. 자세한 내용은 § 7.2.1 appearance가 요소의 장식적 측면에 미치는 영향 및 § 7.2.2 appearance가 요소의 의미적 측면에 미치는 영향 참고.

auto

위젯은 네이티브 외형을 가질 수 있습니다.

위젯이 아닌 요소는 none을 지정한 것처럼 렌더링되어야 합니다.

textfield

input 요소 중 type 속성이 Search 상태인 경우, 해당 요소는 Text 상태의 input처럼 "일반" 텍스트 입력 위젯으로 렌더링됩니다.

다른 모든 요소에는 이 값이 auto와 동일하게 동작합니다.

menulist-button

드롭다운 박스 select 요소에서, 요소는 드롭다운 버튼을 포함한 드롭다운 박스로 렌더링되나, 반드시 OS의 네이티브 컨트롤을 사용하지 않아도 됩니다. 이 요소에서는 color, background-color, border 등 CSS 속성을 무시하면 안 됩니다(auto에서는 무시 가능).

다른 모든 요소에는 이 값이 auto와 동일하게 동작합니다.

<compat-auto>

이 값들은 이전 비표준 버전에서 개발된 콘텐츠와의 호환성을 위해 존재합니다. 모두 auto와 동일하게 동작합니다.

<compat-auto> =  searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar | button 

auto가 폭넓게 지원되면 이를 권장하는 것이 좋음.

이 값들 중 웹 호환에 필요 없는 값은 목록에서 삭제하고, 반대로 꼭 필요한 값이 누락됐다면 추가해야 함.

호환성 때문에 일부 값은 임의 요소에 완전한 효과를 주거나, 일부 값은 위젯에 부수효과를 줄 필요가 있을 수 있음.

input[type=checkbox] {
  all: unset; /* 이 단축형은 appearance도 none으로 초기화함 */
  width: 1em;
  height: 1em;
  display: inline-block;
  background: red;
}
input[type=checkbox]:checked {
  border-radius: 50%;
  background: green;
}
input[type=checkbox]:focus-visible {
  outline: auto;
}

위젯에서 계산된 값이 auto, textfield, menulist-button, 또는 <compat-auto> 값 중 하나일 때, UA는 의도된 외형을 유지하기 위해 일부 CSS 속성을 무시할 수 있고, 선택된 외형에 의미가 없는 속성도 무시할 수 있습니다. 하지만 아래 속성들은 무시하면 안 됩니다:

• appearance
• display (단 inner display type은 무시 가능)
• visibility
• position
• top
• right
• bottom
• left
• float
• clear
• margin 및 관련 long-hand 속성
• unicode-bidi
• direction
• cursor
• z-index

더 포함해야 할 속성이 있을까? 일부는 삭제해야 할까? 무시해도 되는 속성을 whitelist하는 게 나을까, 아니면 무시하면 안 되는 속성을 blacklist하는 게 나을까? 어느 쪽이든 UA는 위젯 렌더링 시 일부 속성을 무시하므로, 명세에서 이에 대해 언급해야 함.

레거시 콘텐츠 호환성을 위해 UA는 -webkit-appearance도 레거시 이름 별칭으로 appearance와 함께 지원해야 합니다.

7.2.1. appearance가 요소의 장식적 측면에 미치는 영향

CSS 스타일 규칙에 의해 생성되지 않은 위젯의 모든 장식적 시각적 요소들은 appearance를 사용해 외형을 변경할 때 반드시 억제되어야 하며, UA의 내부 표현이 여러 요소 또는 의사 요소를 조합해서 만든 경우에도 마찬가지입니다.

UA는 위젯에 appearance가 none일 때 알아볼 수 있는 모양을 줄 수 있도록 UA 스타일시트에 스타일 규칙을 포함해야 합니다.

참고: 따라서 작성자는 원하는 스타일을 얻기 위해 이러한 UA 스타일 규칙을 오버라이드해야 할 수 있습니다.

7.2.2. appearance가 요소의 의미적 측면에 미치는 영향

UA는 위젯을 원래 의미대로 동작시키는 데 필요한 측면은 반드시 보존해야 합니다. UA는 위젯의 동작이 가능하기만 하다면 다른 외형과 느낌을 제공할 수 있습니다. 위젯의 현재 상태를 관찰하는 데만 필요한 요소(동작에는 필요 없음)는, 동일 정보를 일반 CSS로 전달할 수 있을 때 억제해야 합니다. 문서 언어는 자신이 정의하는 각각의 위젯에 대해 반드시 어떤 것을 보존해야 하는지 명시해야 합니다.

요소의 동작 및 의미는 문서 언어에서 계속 정의되며, 이 속성의 영향은 받지 않습니다.

반대로, 요소의 외형을 변경해도 해당 외형의 요소에 일반적으로 적용되는 의미, 의사 클래스, 이벤트 핸들러 등이 해당 요소에 적용되어서는 안 됩니다.

7.3. 컨트롤 별 규칙

이 섹션의 일부 또는 전부는 나중에 [HTML] 명세로 이동하는 것이 좋을지도 모릅니다.

일부 요소에서는 특정 속성을 설정하면 appearance: auto가 억제됩니다. 예를 들어, appearance가 auto여도, 버튼에 border를 설정하면 네이티브 외형이 사라집니다. 이는 auto 정의와 모순되지 않으며, appearance: auto는 UA가 네이티브 외형을 사용할 수 있음을 의미할 뿐입니다. 더 나은 상호 운용성을 위해, 어떤 요소의 어떤 속성이 이런 효과를 내는지 문서화하는 것이 좋겠습니다.

UA 스타일시트에 무엇을 넣어야 하는지 문서화하면 좋겠습니다.

7.3.1. 단일 줄 텍스트 입력 컨트롤

appearance가 auto일 때, [HTML]의 <input type=text> 등 단일 줄 텍스트 입력 컨트롤은 다음과 같이 렌더링되어야 합니다:

• 내용이 인라인 방향으로 content edge까지 잘립니다.

• 내용이 블록 방향으로 padding edge까지 잘립니다.

• 내용이 수직으로 가운데 정렬됩니다.

• 내용이 줄바꿈되지 않습니다.

• text-overflow 속성이 overflow 속성 값과 관계없이 적용됩니다.

부록 A. 감사

이 부록은 정보 제공용입니다.

이 명세는 [CSS-UI-3]를 기반으로 하며, 대부분 1999년부터 현재까지 Tantek Çelik이 편집 및 작성하였고, 처음에는 Microsoft를 대표해, 그 후 초청 전문가로, 최근에는 Mozilla를 대표해 작업하였습니다.

피드백과 기여에 감사드립니다: Rossen Atanassov, Tab Atkins, L. David Baron, Bert Bos, Matthew Brealey, Rick Byers, Ada Chan, James Craig, Michael Cooper, Axel Dahmen, Michael Day, Micah Dubinko, Elika E., Steve Falkenburg, Andrew Fedoniouk, Al Gilman, Ian Hickson, Bjoern Hoehrmann, Alan Hogan, David Hyatt, Richard Ishida, Sho Kuwamoto, Yves Lafon, Stuart Langridge, Susan Lesch, Peter Linss, Kang-Hao Lu, Masayuki Nakano, Mats Palmgren, Brad Pettit, Chris Rebert, François Remy, Andrey Rybka, Simon Sapin, Alexander Savenkov, Sebastian Schnitzenbaumer, Lea Verou, Etan Wexler, David Woolley, Frank Yan, Boris Zbarsky, 그리고 Domel에게.

부록 B. 변경사항

이 부록은 정보 제공용입니다.

2020년 1월 24일 작업 초안의 변경사항

여러 편집상의 조정 외에도, 다음과 같은 규범적 변경이 있었습니다:

• appearance: button이 버튼에만 적용되도록 변경
• outline-style이 auto일 때 outline-width를 무시할 수 있음
• 변형(transform)에도 캐럿의 가시성 보장
• resize: block과 resize: inline을 css-logical-1에서 이 명세로 이동
• accent-color 속성 도입

2020년 1월 2일 작업 초안의 변경사항

여러 편집상의 조정 외에도, 다음과 같은 규범적 변경이 있었습니다:

• user-select가 불연속적으로 애니메이션될 수 있도록 정의
• appearance: button의 적용 대상을 제한하여, 버튼이 아닌 위젯에는 버튼 외형을 부여할 수 없도록 변경
• 변형(transform)으로 축소돼도 캐럿의 가시성 유지 조건 추가

2017년 12월 22일 작업 초안의 변경사항

여러 편집상의 조정 외에도, 다음과 같은 규범적 변경이 있었습니다:

• 폼 컨트롤별 렌더링 규칙 상세 추가
• text-overflow와 익명 블록 컨테이너의 상호작용 명확화
• 모든 문서 포맷의 하이퍼링크에 pointer 커서 요구
• box-sizing 및 text-overflow 속성을 각각 [CSS-SIZING-3]와 [CSS-OVERFLOW-4]로 이동
• text 커서의 writing mode 일치 요구(MAY → MUST로 변경)
• appearance 속성 정의 대폭 재정비하여 기존 웹 콘텐츠와 호환성 있게 설계
• appearance: auto가 계산값에서 다양한 값으로 매핑되는 로직을 used value 시점으로 변경
• 작성자 요구사항(예: cursor: pointer)에 대한 명확화

2015년 9월 22일 첫 공개 작업 초안의 변경사항

여러 편집상의 조정 외에도, 다음과 같은 규범적 변경이 있었습니다:

• caret-animation 속성 제거(추후 필요성 입증되면 재도입 가능)
• resize 속성이 이미지, 비디오 대체 요소 및 iframe에도 적용
• text-overflow의 문자열 값 및 dual 값이 3 레벨에서 이 명세로 이동
• 방향 포커스 내비게이션 속성을 3 레벨에서 4 레벨로 이동
• 안정화된 [CSS-UI-3] 내용 병합

부록 C. 보안 및 개인정보 보호 고려사항

이 부록은 정보 제공용입니다.

W3C TAG는 명세 편집자가 정보 제공용으로 답할 수 있도록 보안 및 개인정보 셀프 리뷰 질문지를 개발 중입니다.

고려해야 할 질문에 따라

이 명세가 개인 식별 정보와 관련이 있습니까?

아닙니다.

이 명세가 고가치 데이터와 관련이 있습니까?

아닙니다.

이 명세가 브라우징 세션 전체에 걸쳐 지속되는 새로운 상태를 도입합니까?

아닙니다.

이 명세가 웹에 지속적인 교차 출처 상태를 노출합니까?

아닙니다.

이 명세가 현재 접근할 수 없는 다른 데이터를 출처에 노출합니까?

아닙니다.

이 명세가 새로운 스크립트 실행/로딩 메커니즘을 도입합니까?

로딩은 예, 실행은 아니오.

cursor 속성은 <image> 값을 받아 URL을 로드할 수 있습니다. SVG 문서일 수 있으며, 스크립트를 포함할 수 있지만 이 명세는 스크립트 실행 금지를 요구합니다.

이 명세가 출처에 사용자의 위치 정보 접근을 허용합니까?

아닙니다.

이 명세가 출처에 사용자의 장치 센서 접근을 허용합니까?

예.

방향 포커스 내비게이션 속성은 키보드의 방향키 등 장치의 키보드 내비게이션 입력 메커니즘에 간접적으로 접근을 허용합니다.

이 명세가 사용자의 로컬 컴퓨팅 환경 측면에 대한 접근을 허용합니까?

아닙니다.

이 명세가 다른 장치에 대한 접근을 허용합니까?

아닙니다.

이 명세가 UA의 네이티브 UI에 대한 어느 정도의 제어를 허용합니까?

예.

cursor 및 caret 속성과 서브 속성으로 UA 네이티브 UI의 커서 및 텍스트 삽입 캐럿 표시를 페이지가 변경할 수 있습니다. 또한 outline-style의 auto 값(즉, outline 단축형)으로 모든 요소에 네이티브 포커스 표시를 할 수 있습니다.

appearance 속성으로 네이티브 스타일링을 꺼버리고 css 기반 스타일로 대체할 수도 있습니다.

이 명세가 웹에 임시 식별자를 노출합니까?

아닙니다.

이 명세가 1st party와 3rd party 맥락의 동작 차이를 구별합니까?

아닙니다.

이 명세가 UA의 "시크릿 모드"에서 어떻게 동작해야 하나요?

동일하게 동작해야 합니다.

이 명세가 사용자의 로컬 장치에 데이터를 영구 저장합니까?

아닙니다.

이 명세에 "보안 고려사항" 및 "개인정보 보호 고려사항" 섹션이 있습니까?

예.

이 명세가 기본 보안 특성을 약화시키는 것을 허용합니까?

아니오.

부록 D. HTML 기본 스타일시트 추가

이 부록은 정보 제공용입니다.

HTML 폼 컨트롤 및 일부 동적 프레젠테이션 속성을 표현하기 위한 기본 스타일시트의 잠재적 추가 내용:

:enabled:focus {
  outline: 2px inset;
}

button, input[type=button], input[type=reset], input[type=submit], input[type=checkbox], input[type=radio], textarea, input, input[type=text], input[type=password], input[type=image] {
  display: inline-block;
}

input[type=button], input[type=reset], input[type=submit], input[type=checkbox], input[type=radio], input, input[type=text], input[type=password], input[type=image] {
  white-space: nowrap;
}

button {
  /* BUTTON 태그의 공백 처리 */
  white-space:normal;
}

input[type=reset]:lang(en) {
  /* 언어별 HTML input type=reset 버튼 기본 내용 */
  content: "Reset";
}

input[type=submit]:lang(en) {
  /* 언어별 HTML input type=submit 버튼 기본 내용 */
  content: "Submit";
}

/* UA는 다른 언어에 대해 언어별 Reset/Submit 규칙을 사용해야 함. */

input[type=button], input[type=reset][value], input[type=submit][value] { 
  /* input 버튼의 텍스트 내용/레이블 */
  content: attr(value);
}

textarea {
  /* TEXTAREA 태그의 공백 처리 */
  white-space:pre-wrap;
  resize: both;
}

input[type=hidden] {
  /* HTML hidden 텍스트 필드의 외형 */
  display: none !important;
}

input[type=image] {
  content: attr(src,url);
  border: none;
}

select[size] {
  /* HTML4/XHTML1 <select> size>1 리스트 외형 */
  display: inline-block;
  height: attr(size,em);
}

select,select[size=1] {
  /* size 없는 <select>, 또는 size=1 - 팝업 메뉴 외형 */
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

select[size]:active {
  /* 활성화된 size>1 <select> 리스트 외형 */
  display: inline-block;
}

optgroup, option {
  display: block;
  white-space: nowrap;
}

optgroup[label],option[label] {
  content: attr(label);
}

option[selected]::before {
  display: inline;
  content: check;
}

/* 프레임 크기 조정은 본 명세에서 직접 다루지 않으나,
   아래 규칙이 합리적 동작의 근사치를 제공할 수 있음. */

/*

frame { resize:both }
frame[noresize] { resize:none }

*/