모든 브라우저에서 일관되게 보이는 사용자 지정 범위 입력 만들기

UI 구성 요소 라이브러리의 유지 관리자 중 한 명으로서 저는 수많은 입력 요소를 구현하고 스타일을 지정했습니다. 어느 날 나는 범위 입력을 라이브러리에 추가하는 작업을 할당받았고, 과거에 구현했던 다른 입력과 유사한 프로세스가 될 것이라고 생각했습니다. 여러 브라우저에서 범위 입력을 테스트하기 시작하고 더 많은 작업이 필요하다는 것을 빨리 깨달았을 때까지 그 가정은 정확했습니다.

많은 연구 끝에 마침내 일관된 렌더링을 위해 범위 입력 스타일을 지정하는 데 도움이 되는 충분한 블로그 게시물, 기사 및 심층 튜토리얼을 찾아낼 수 있었습니다. 여러 리소스를 검색하는 대신 이 블로그 게시물의 목적은 모든 브라우저에서 일관되게 표시되는 범위 입력의 스타일을 적절하게 지정하는 방법을 배울 수 있는 원스톱 상점을 제공하는 것입니다. 내가 직접 이 작업을 수행해야 할 때 갖고 싶었던 기사이며 이 프로세스를 더 빠르고 원활하게 만드는 데 도움이 되었으면 합니다.

범위 입력의 해부학

범위 입력은 두 가지 주요 부분으로 구성됩니다.

1. 길
   이것은 엄지 가 움직이는 슬라이더 부분입니다. 다른 말로 하면 선택할 수 있는 값의 범위를 나타내는 긴 요소입니다.
2. 무지
   이것은 사용자가 다양한 범위 값을 선택하기 위해 이동할 수 있는 트랙의 요소입니다.

수학 방정식이라면:

범위 입력 = 트랙 + 썸

범위 입력은 때때로 "슬라이더"라고 하며 이 기사의 나머지 부분에서는 이 용어를 서로 바꿔서 사용할 것입니다.

브라우저 불일치

처음에 범위 입력 스타일 지정에 대한 자습서가 필요한 이유를 보여주기 위해 기본 HTML 범위 입력의 일부 스크린샷과 네 가지 주요 브라우저(Chrome, Firefox, Safari 및 가장자리). 또는 원하는 경우 각 브라우저에서 이 CodeSandbox 데모를 보고 모든 영광에서 브라우저 불일치를 볼 수 있습니다.

참고: 이 스크린샷은 2021년 9월을 기준으로 촬영되었으며 각 브라우저 업데이트에 따라 변경될 수 있습니다.

내 생각에 기본적으로 가장 사용자 친화적인 버전의 입력을 렌더링하는 Chrome을 살펴보고 시작하겠습니다.

Firefox가 다음 단계이며 Chrome 렌더링 입력과 다르게 보입니다. Firefox에서는 트랙의 높이가 약간 더 짧습니다. 반면에 엄지손가락의 높이와 너비가 더 크고 Chrome 버전과 동일한 파란색 배경색이 없습니다.

Safari 슬라이더는 외관상 Firefox 버전과 가장 비슷하지만 여전히 다릅니다. 이번에는 트랙 주위에 그림자 효과가 있는 것으로 보이며 엄지손가락의 높이와 너비가 Chrome 및 Firefox의 변환보다 작습니다. 자세히 보면 엄지 손가락이 트랙의 중앙에 직접 있지 않아 광택이 없는 모양과 느낌을 주는 것을 알 수 있습니다.

마지막으로 중요한 것은 Microsoft Edge가 Chromium을 기반으로 구축되었으므로 Chromium 이전 이전 버전보다 다른 세 가지 브라우저와 더 잘 일치하는 Edge입니다. 그러나 여전히 다른 세 브라우저와 다르게 렌더링되고 있음을 알 수 있습니다. Edge의 범위 입력 표현은 엄지손가락과 엄지손가락 앞 트랙의 왼쪽에 더 어두운 회색 배경색이 있다는 점을 제외하면 Chrome 버전과 매우 유사합니다.

이제 각 브라우저가 범위 입력을 렌더링하는 데 얼마나 일관성이 없는지 보았으므로 CSS를 사용하여 이를 균일화하는 방법을 살펴보겠습니다.

범위 재설정(기준 스타일)

브라우저 불일치는 매우 다양하기 때문에 우리는 공평한 경쟁의 장에서 시작해야 합니다. 각 브라우저가 적용하는 기본 스타일이 제거되면 더 균일하게 보이는 입력을 만들기 위해 작업을 시작할 수 있습니다. input[type="range"] 요소 속성 선택기를 사용하고 여기에 적용된 스타일은 입력에 대한 CSS 재설정처럼 작동합니다.

기준 스타일을 적용하려면 다음 네 가지 속성이 필요합니다.

1. -webkit-appearance: none;
   이 속성은 모든 주요 브라우저에 적용되는 공급업체 접두사입니다. 값을 none 으로 지정하면 각 브라우저에 기본 스타일을 지우도록 지시합니다. 이를 통해 처음부터 시작하여 해당 지점에서 입력의 모양을 구축할 수 있습니다.
2. background: transparent;
   이렇게 하면 입력에 적용된 기본 배경이 지워집니다.
3. cursor: pointer;
4. width
   입력의 전체 너비를 설정합니다.

 input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 15rem; }

트랙 스타일링

트랙(및 썸)을 스타일링할 때 관련 요소에 적절한 스타일을 적용하기 위해 다양한 브라우저 특정 공급업체 접두사를 대상으로 해야 합니다. 앞으로 -webkit 접두사가 붙은 모든 유사 요소는 Chrome, Safari, Opera 및 Edge(Chromium 이후) 브라우저에 적용됩니다. -moz 접두사가 있는 모든 항목은 Firefox와 관련이 있습니다.

다음은 트랙을 대상으로 지정하는 데 사용할 의사 요소입니다.

• ::-webkit-slider-runnable-track
  Chrome, Safari 및 Edge Chromium에서 트랙 을 대상으로 합니다.
• ::-moz-range-track
  Firefox에서 트랙 을 대상으로 합니다.

 /***** Track Styles *****/ /***** Chrome, Safari, Opera, and Edge Chromium *****/ input[type="range"]::-webkit-slider-runnable-track { background: #053a5f; height: 0.5rem; } /******** Firefox ********/ input[type="range"]::-moz-range-track { background: #053a5f; height: 0.5rem; }

트랙에 필요한 유일한 속성은 height 와 background 입니다. 그러나 가장자리를 둥글게 하기 위해 적용되는 border-radius 을 보는 것이 일반적입니다.

엄지손가락 스타일링

썸(사용자가 움직이는 가운데 노브)을 스타일링하면 범위 입력의 해당 부분에서 브라우저 간에 불일치가 더 많기 때문에 고려해야 할 뉘앙스가 더 많습니다.

다음은 엄지손가락을 대상으로 하는 데 사용할 의사 요소입니다.

• ::-webkit-slider-thumb
  Chrome, Safari 및 Edge Chromium에서 엄지손가락 을 대상으로 합니다.
• ::-moz-range-thumb
  Firefox에서 엄지손가락 을 대상으로 합니다.

Firefox와 Webkit 브라우저는 스타일 문제가 다르기 때문에 각 문제를 개별적으로 해결하고 엄지손가락에 적용되는 각각의 기발한 기본값을 처리하는 방법을 보여드리겠습니다.

크롬, 사파리, 엣지 크롬(웹킷)

::-webkit-slider-thumb 의사 요소에 적용해야 하는 첫 번째 스타일은 -webkit-appearance: none; 공급업체 접두사. "기준 스타일" 섹션 내에서 이 속성을 사용하여 브라우저에서 적용되는 일반 기본 스타일을 재정의했으며 엄지 손가락에서 비슷한 용도로 사용됩니다.

기본 스타일이 제거되면 고유한 사용자 정의 스타일을 적용할 수 있습니다. 엄지손가락에 height , width 및 background-color 를 적용한다고 가정하면 여기까지의 예가 있습니다.

기본적으로 WebKit 브라우저는 썸이 트랙 중앙에 있지 않도록 썸을 렌더링합니다.

엄지손가락을 트랙의 중앙에 적절하게 맞추기 위해 다음 공식을 사용하여 margin-top 속성에 적용할 수 있습니다.

margin-top = (픽셀 단위 트랙 높이 / 2) - (픽셀 단위 엄지손가락 높이 /2)

이전 섹션에서 적용한 스타일을 취하고 rems 을 픽셀로 변환하면 트랙 높이가 8px이고 엄지손가락 높이가 32px가 됩니다. 이것은 다음을 의미합니다.

여백 상단 = (8/2) - (32/2) = 4 - 16 = -12px

이를 기반으로 웹킷 브라우저에 대한 최종 스타일은 다음 코드 블록과 같습니다.

 /***** Thumb Styles *****/ /***** Chrome, Safari, Opera, and Edge Chromium *****/ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; margin-top: -12px; /* Centers thumb on the track */ background-color: #5cd5eb; height: 2rem; width: 1rem; }

파이어폭스

Firefox에서 thumb에 스타일을 적용할 때 ::-moz-range-thumb 의사 요소를 활용해야 합니다. 고맙게도 Firefox는 Webkit 브라우저와 같은 센터링 문제를 겪지 않습니다. 그러나 엄지에 적용되는 기본 테두리 반경과 회색 테두리 주위에 한 가지 문제가 있습니다.

기본 회색 테두리를 수정하기 위해 테두리를 추가할 수 있습니다 border: none; 재산. 적용되는 기본 border-radius를 제거하기 위해 border-radius: 0 속성을 추가할 수 있습니다. 그러면 이제 썸이 모든 브라우저에서 일관되게 보일 것입니다.

이를 기반으로 Firefox 브라우저에 대한 최종 스타일은 다음과 같습니다.

 /***** Thumb Styles *****/ /***** Firefox *****/ input[type="range"]::-moz-range-thumb { border: none; /*Removes extra border that FF applies*/ border-radius: 0; /*Removes default border-radius that FF applies*/ background-color: #5cd5eb; height: 2rem; width: 1rem; }

참고: Webkit 브라우저는 이 반경을 경계에 자동으로 적용하지 않으므로 위에서 수행한 것처럼 취소하는 것과는 반대로 어떤 형태의 경계 반경을 엄지손가락에 적용하려는 경우 다음이 필요합니다. -webkit-slider-thumb 및 ::-moz-range-thumb 의사 요소 모두에 원하는 border-radius 치수를 적용합니다.

초점 스타일

범위 입력은 대화형 요소이므로 접근성 모범 사례 및 표준을 준수하기 위해 포커스 스타일을 추가하는 것이 필수적입니다. 포커스 스타일이 적용되면 사용자에게 시각적 표시기를 제공하며 키보드를 사용하여 페이지를 탐색하는 사용자에게 특히 중요합니다.

WAI-ARIA: Slider 문서에 따르면 다음을 권장합니다.

포커스는 슬라이더(마우스 사용자가 이동할 시각적 개체, 엄지손가락이라고도 함)에 배치됩니다.

가장 먼저 할 일은 기본 포커스 스타일을 제거하여 사용자 정의 스타일로 재정의할 수 있도록 하는 것입니다. 썸 포커스 스타일을 대상으로 하기 위해 이전 섹션에서 사용한 ::-webkit-slider-thumb 및 ::-moz-range-thumb 의사 요소를 활용하고 이를 :focus psuedo-class와 결합할 수 있습니다. . 그런 다음 CSS 아웃라인 및 아웃라인 오프셋 속성을 사용하여 원하는 방식으로 스타일을 지정할 수 있습니다.

 /***** Focus Styles *****/ /* Removes default focus */ input[type="range"]:focus { outline: none; } /***** Chrome, Safari, Opera, and Edge Chromium *****/ input[type="range"]:focus::-webkit-slider-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; } /******** Firefox ********/ input[type="range"]:focus::-moz-range-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; }

참고 : border-radius 이 엄지손가락에 적용되면 Firefox는 엄지손가락 모양의 윤곽선을 렌더링하는 반면 다른 브라우저는 뭉툭한 윤곽선을 표시합니다. 불행히도 이에 대한 간단한 CSS 수정은 없으며 이것이 존재할 수 있는 유일한 불일치입니다. 그러나 이러한 스타일을 추가하는 주요 목적은 접근성을 위한 것이며 요소에 포커스가 있을 때 시각적 표시기를 제공하는 주요 목표는 여전히 달성됩니다.

함께 모아서

범위 입력을 균일화하는 데 필요한 모든 스타일을 다루었으므로 최종 CSS 스타일시트는 다음과 같습니다.

 /********** Range Input Styles **********/ /*Range Reset*/ input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; width: 15rem; } /* Removes default focus */ input[type="range"]:focus { outline: none; } /***** Chrome, Safari, Opera and Edge Chromium styles *****/ /* slider track */ input[type="range"]::-webkit-slider-runnable-track { background-color: #053a5f; border-radius: 0.5rem; height: 0.5rem; } /* slider thumb */ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; /* Override default look */ appearance: none; margin-top: -12px; /* Centers thumb on the track */ /*custom styles*/ background-color: #5cd5eb; height: 2rem; width: 1rem; } input[type="range"]:focus::-webkit-slider-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; } /******** Firefox styles ********/ /* slider track */ input[type="range"]::-moz-range-track { background-color: #053a5f; border-radius: 0.5rem; height: 0.5rem; } /* slider thumb */ input[type="range"]::-moz-range-thumb { border: none; /*Removes extra border that FF applies*/ border-radius: 0; /*Removes default border-radius that FF applies*/ /*custom styles*/ background-color: #5cd5eb; height: 2rem; width: 1rem; } input[type="range"]:focus::-moz-range-thumb { border: 1px solid #053a5f; outline: 3px solid #053a5f; outline-offset: 0.125rem; }

결론

기사 전체에 걸쳐 설명된 방법 외에도 내가 만든 range-input.css 라는 범위 입력 CSS 생성기를 활용할 수도 있습니다. 이 프로젝트의 핵심은 개발자를 위해 이 프로세스를 더 간단하게 만드는 도구를 만드는 것이었습니다. CSS 생성기를 사용하면 일반적인 CSS 속성의 스타일을 빠르게 지정할 수 있으며 적용하려는 스타일의 실시간 미리보기를 표시하는 데모 슬라이더를 제공합니다.

앞으로 스타일링 범위 입력이 더 간단해지기를 바랍니다. 그러나 그날이 올 때까지 대상으로 할 의사 요소와 공급업체 접두어를 알면 필요에 맞게 슬라이더를 스타일링하는 데 도움이 됩니다.

Smashing Magazine에 대한 추가 리소스

• CSS 생성기
• accent-color 양식 스타일 단순화
• 일반적인 UI 문제를 위한 스마트 CSS 솔루션
• CSS의 object-fit 및 background-size 에 대한 심층 분석