CSS <system-color> 자료형: 시스템에서 지정한 색상

CSS <system-color> 자료형은 보통 웹 페이지의 다양한 곳에서 사용하는 기본 색상들을 나타냅니다.

그런데 사용자 에이전트의 접근성 기능 중 하나인 “색 강제 모드”가 활성화된 경우, 일부 속성에는 사용자와 사용자 에이전트가 정해놓은 팔레트에 속한 색으로 강제되며 저작자가 지정한 색은 무시됩니다. 색 강제 모드에서의 <system-color>는 팔레트의 색들을 나타내므로, 저작자는 이 자료형을 사용해 웹 페이지의 다른 부분들이 강제된 색에 어울리도록 대응할 수 있습니다. Windows의 고대비 모드가 색 강제 모드의 대표적인 예시입니다.

색 강제 모드에서도 웹 페이지의 모든 부분이 동일한 색상 팔레트를 사용해 일관적으로 보이려면, 저작자는 색 강제 대상이 아닌 모든 속성에 <system-color>를 사용해야 합니다. 색 강제 모드 여부는 forced-colors 미디어 쿼리로 알 수 있습니다.

<color>를 사용할 수 있는 모든 곳에는 <system-color>를 사용할 수 있습니다.

구문

모든 키워드는 대소문자를 구별하지 않지만, 가독성을 위해 대소문자를 혼합해 사용했습니다.

AccentColor

강조 표시된 사용자 인터페이스 컨트롤의 배경색

AccentTextColor

강조 표시된 사용자 인터페이스 컨트롤의 전경색

ActiveText

활성 링크의 색

ButtonBorder

UI 컨트롤의 기본 테두리 색

ButtonFace

UI 컨트롤의 배경색

ButtonText

UI 컨트롤의 전경색

Canvas

애플리케이션 콘텐츠 또는 문서의 배경색

CanvasText

애플리케이션 콘텐츠 또는 문서의 전경색

Field

입력 칸의 배경색

FieldText

입력 칸의 전경색

GrayText

비활성 항목의 전경색 (e.g. 비활성 UI 컨트롤)

Highlight

선택한 텍스트의 배경색

HighlightText

선택한 텍스트의 전경색

LinkText

방문한 적 없는 비활성 링크의 색

Mark

(HTML <mark> 요소 등을 사용해) 마킹된 텍스트의 배경색

MarkText

(HTML <mark> 요소 등을 사용해) 마킹된 텍스트의 전경색

SelectedItem

(체크박스 등) 선택한 항목의 배경색

SelectedText

(체크박스 등) 선택한 항목의 전경색

VisitedText

방문한 적 있는 링크의 색

명세

• CSS Color Module Level 4

브라우저 호환성

같이 보기

• <color>