악센트 색상으로 양식 스타일 단순화

나는 당신에 대해 모르지만 개발자로서의 일상을 더 단순하게 만들고 많은 중복 코드를 제거할 수 있게 해주는 새로운 CSS 속성이 도착하는 것을 좋아합니다. aspect-ratio 는 그러한 속성 중 하나입니다(최근 패딩 해킹의 필요성 제거). accent-color 은 다음이 될 수 있습니다.

양식 입력 스타일 지정

체크박스를 선택합시다. 모든 브라우저에서 사용자 에이전트 스타일시트(브라우저의 기본 스타일을 담당)에 따라 스타일이 다릅니다.

역사적으로 이러한 입력의 스타일을 지정하는 실제 방법은 없었습니다. 대신 많은 웹 개발자는 입력 자체를 시각적으로(그러나 접근 가능하게) 숨긴 다음 레이블에 유사 요소의 스타일을 지정하는 잘 알려진 해킹에 의존합니다. (이 모든 것은 라디오 버튼에도 적용됩니다.)

이것은 실제로 과거 솔루션보다 덜 장황합니다. ModernCSS에는 이 기술을 사용하여 사용자 정의 체크박스와 라디오 버튼을 구현하는 방법에 대한 자세한 자습서가 있습니다.

이 기술은 브라우저 간에 작동하며 확인란을 완전히 사용자 지정해야 하는 경우(애니메이션 등) 여전히 필요합니다. 하지만 대부분의 경우 멋진 스타일링이 필요하지 않습니다. 단순히 브랜드 색상을 적용하고 계속 진행할 수 있으면 됩니다. 그 지저분한 CSS를 모두 없애면 좋지 않을까요? accent-color 입력 !

간단한 사용

가장 간단한 사용 사례의 경우 :root 요소에 accent-color 속성을 설정하고 웹 페이지의 모든 곳에 적용할 수 있습니다.

 :root { accent-color: rgba(250, 15, 117); }

이것은 선택된 색상을 (작성 당시) 체크박스, 라디오 버튼, 범위 및 진행 요소에 적용합니다.

접근성

꽤 멋진 기능은 브라우저가 자체 내부 알고리즘을 사용하여 충분한 색상 대비를 보장하기 위해 체크 표시에 가장 적합한 색상을 자동으로 결정한다는 것입니다. 즉, 체크박스에 최대한 액세스할 수 있도록 하기 위해 추가 코드 스타일 지정이 필요하지 않습니다.

다음 데모에서는 두 가지 다른 강조 색상을 적용합니다. Chrome에서 이것을 보면 왼쪽에 있는 체크 표시가 흰색이고 오른쪽에 있는 체크 표시가 검은색인 것을 볼 수 있습니다. 브라우저는 이를 위해 다른 알고리즘을 사용하므로 Chrome과 Firefox에서 다른 결과를 경험할 수 있습니다.

사용자 정의 속성

다른 UI 요소에 동일한 색상을 적용하려면 사용자 정의 속성을 사용할 수 있습니다. 루트 요소의 사용자 정의 속성으로 색상을 설정한 다음 (예를 들어) 표제 또는 기타 양식 요소에 적용할 수 있습니다.

 :root { --brand: rgba(250, 15, 117); accent-color: var(--brand); }

재미있는 효과도 만들 수 있습니다. 다음 데모에서는 HTML의 style 속성을 사용하여 요소의 인덱스( --i )에 해당하는 사용자 정의 속성을 각 체크박스 그룹에 할당합니다. 그런 다음 CSS에서 이를 사용하여 HSL 색상 함수의 색조 값을 계산하여 강조 색상을 결정합니다. 무지개 체크박스!

기타 양식 요소

불행히도 accent-color 은 선택 드롭다운과 같이 예상할 수 있는 다른 요소에는 적용되지 않습니다. 버튼 및 텍스트 입력과 같이 이미 스타일을 지정할 수 있는 양식 요소에도 선택한 색상을 적용할 수 있습니다. 사용자 정의 속성은 텍스트 입력의 테두리와 버튼의 배경에 적용할 수 있으므로 여기에서 유용합니다. 예를 들면 다음과 같습니다.

Michelle Barker의 Pen[사용자 정의 속성이 있는 액센트 색상](https://codepen.io/smashingmag/pen/VwWxxPJ)을 참조하십시오.

accent-color 에 대한 Web.dev 문서에는 목록 마커, 텍스트 선택 하이라이트 및 포커스 링을 포함하여 양식에만 국한되지 않는 다른 요소의 스타일을 지정하기 위한 Adam Argyle의 이 편리한 스니펫이 포함되어 있습니다.

 html { --brand: hotpink; scrollbar-color: hotpink Canvas; } :root { accent-color: var(--brand); } :focus-visible { outline-color: var(--brand); } ::selection { background-color: var(--brand); } ::marker { color: var(--brand); } :is( ::-webkit-calendar-picker-indicator, ::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ) { color: var(--brand); }

색 구성표

양식 요소를 더 맞춤화하기 위해 color-scheme 속성은 사용자의 밝음 또는 어두운 모드 선호도에 따라 스타일을 지정하는 데 도움이 될 수 있습니다. 현재, 우리는 prefers-color-scheme 미디어 쿼리를 사용하여 사용자의 시스템 기본 설정에 따라 다크 모드 스타일을 제공할 수 있습니다.

 /* If the user's preference is set to 'dark', this renders white text on a black background */ @media (prefers-color-scheme: dark) { body { background-color: #000000; color: #ffffff; } }

그대로 두면 확인란이 선택되지 않은 상태로 밝은 배경을 갖게 됩니다.

color-scheme 를 사용하여 기본 설정에 따라 확인란이 밝거나 어두운 스타일을 갖도록 할 수 있습니다. CSS의 루트 요소에 설정하면 전체 페이지에 적용됩니다.

 :root { color-scheme: light dark; }

색 구성표를 선호하는 순서대로 표현한 것입니다. 또는 HTML의 메타 태그를 사용하여 구현할 수 있습니다.

 <meta name="color-scheme" content="light dark">

이것은 CSS 파일이 구문 분석되고 실행되기 직전에 브라우저에서 읽을 것이기 때문에 실제로 바람직합니다. 따라서 스타일이 지정되지 않은 콘텐츠(FOUC)의 플래시를 피하는 데 도움이 될 수 있습니다.

무지개 확인란 데모에서 색상 구성표를 전환할 때 브라우저가 일부 확인 표시의 색상을 조정하면서도 충분한 대비를 유지하는 것을 알 수 있습니다. 정말 멋진!

color-scheme 는 사용자 에이전트 스타일에 영향을 줍니다. 페이지에 다른 배경색이나 텍스트 색상 스타일을 제공하지 않고 사용하는 경우 사용자가 어두운 색 구성표를 선택하면 페이지의 기본 색상이 반전되므로 기본 배경 색상은 검정색이 되고 텍스트 색상은 하얀색. 실제로는 CSS로 이를 재정의하고 싶을 가능성이 큽니다. color-scheme 를 prefers-color-scheme 미디어 쿼리와 함께 사용할 수 있습니다. 이 데모에서는 어두운 색 구성표가 선호되는 경우에만 텍스트 색을 설정하기 위해 prefers-color-scheme 를 사용합니다.

color-scheme 은 개별 요소에 설정할 수도 있습니다. 이는 밝은 모드 또는 어두운 모드가 토글되었는지 여부에 관계없이 지정된 색상 구성표를 유지하려는 디자인의 일부 영역이 있는 경우에 유용합니다. 이 데모에서는 전체 색 구성표가 밝더라도 배경이 어두운 형태를 가지고 있습니다. 체크박스가 항상 어두운 색으로 스타일이 지정되도록 어두운 색 구성표를 지정할 수 있습니다.

 .dark-form { color-scheme: dark; }

제한 사항

언급했듯이, 현재 이 기능이 유용할 accent-color 의 영향을 받지 않는 몇 가지 요소가 있습니다. 또 다른 고려 사항은 현재 확인란 또는 라디오 버튼의 선택된 상태만 스타일 지정하는 것으로 제한되어 있다는 것입니다. color-scheme 를 사용하는 것 외에는 확인란 테두리에 약간의 영향을 주지만 전체 사용자 지정을 허용하지 않습니다. 체크되지 않은 상태에서 입력에 대한 테두리 색상과 두께의 스타일을 지정하거나 전체 모양 변경과 같은 더 많은 사용자 지정 스타일을 구현할 수 있으면 좋겠지만 아직 거기까지는 아닙니다. 최소한 체크박스 테두리가 본문 색상을 상속하도록 허용하는 것이 좋습니다.

또한 비디오 컨트롤과 같은 형식 이외의 다른 요소로 accent-color 의 사용을 확장할 수 있는 것이 유용할 것입니다. 현재 개발자가 사용자 지정 컨트롤을 만드는 것은 네이티브 컨트롤의 접근성을 다시 만들기 위해 상당한 양의 작업을 수반합니다. Stephanie Stimac의 이 훌륭한 기사는 개발자가 스타일을 쉽게 지정할 수 있도록 UI 요소를 표준화하기 위해 Open UI에서 수행하는 작업에 대해 자세히 설명합니다.

대안

체크박스나 라디오 버튼의 스타일을 지정하는 다른 방법은 -webkit-appearance: none 으로 기본 스타일을 숨기고 배경 이미지로 바꾸는 것입니다. (이 데모를 참조하십시오.) 최신 브라우저는 이것을 꽤 잘 지원하지만 배경 이미지를 직접 조작할 수 없기 때문에 의사 요소를 사용하는 첫 번째 방법(이 기사의 시작 부분에 설명됨)과 비교할 때 한계가 있습니다. CSS를 사용하여(예: 색상 또는 불투명도 변경) 또는 이미지를 전환합니다.

Houdini CSS API 세트의 일부인 CSS Paint API는 사용자 정의를 위한 더 많은 옵션을 열어 배경 이미지를 조작하기 위해 사용자 정의 속성을 전달할 수 있습니다. Matteo의 이 멋진 데모(및 함께 제공되는 worklet)를 확인하십시오. 지원은 현재 Chromium 브라우저로 제한됩니다.

접근성

양식 컨트롤의 기본 모양 숨기기를 사용할 때 접근 가능한 포커스 스타일을 제공하도록 주의해야 합니다. accent-color 의 장점은 브라우저 기본값을 숨기지 않고 접근성을 유지한다는 것입니다.

브라우저 지원

accent-color 은 현재 최신 버전의 Chrome 및 Edge에서 지원됩니다. layout.css.accent-color.enabled 플래그를 사용하여 Firefox에서 활성화할 수 있으며 다음 릴리스에서 지원될 예정입니다. 불행히도 현재 Safari는 지원되지 않습니다. 그렇다고 해서 바로 사용을 시작할 수 없다는 것은 아닙니다. accent-color 을 지원하지 않는 브라우저는 단순히 브라우저 기본값을 가져오므로 점진적 향상으로 훌륭하게 작동합니다.

결론

여기에서는 체크박스와 라디오 버튼에 대해 주로 이야기했는데, 이는 사용자 정의가 필요한 가장 일반적인 양식 요소 중 하나이기 때문입니다. 그러나 accent-color 은 특히 광범위한 사용자 정의가 필요하지 않을 뿐만 아니라 브라우저가 액세스 가능성을 위한 최상의 옵션을 선택할 수 있도록 하는 많은 양식 요소에 빠르고 쉬운 스타일을 제공할 수 있는 잠재력이 있습니다.

추가 읽기

accent-color , color-scheme 및 스타일링 양식 입력에 대한 일부 리소스:

• MDN 문서
• 악센트 색상에 대한 CSS 트릭 가이드
• Web.dev: CSS 액센트 색상
• Web.dev: 색 구성표로 어두운 모드 개선
• 최신 CSS: 양식 입력 및 텍스트 영역에 대한 사용자 정의 CSS 스타일
• 최신 CSS: 순수 CSS 사용자 지정 스타일 라디오 버튼