appearance: base-select를 지원하는 브라우저에서는 옵션에 미리보기나 가격, 직함, 주의 사항 등을 함께 표시할 수 있다. 기존 <select>의 키보드 조작과 폼 제출 동작은 유지하면서 선택에 필요한 정보를 목록에서 확인하도록 만드는 방식이다.
글은 글꼴 선택, 시간대, 배송 방식, 같은 이름을 가진 동료, 승인이 필요한 부서 등 다섯 가지 예를 전후 비교한다. 시간대 예시만 Intl.DateTimeFormat을 사용하는 자바스크립트가 필요하다. 구현 방법은 Chrome 팀의 발표와 MDN 가이드에서 확인할 수 있다.
맞춤형 선택 목록은 브라우저가 제공하는 <select>를 그대로 사용한다. 키보드 조작, 입력으로 옵션 찾기, 폼 제출, select.value, required, 유효성 검사, 접근성 역할은 브라우저에 맡기며, 컨트롤 자체에 자바스크립트는 필요하지 않다. 옵션의 모양을 바꾸는 데는 각 옵션에 인라인 스타일을 지정하는 방법을 예로 들었다.
다만 휴대전화에서는 차이가 있다. 기본 선택 목록은 iOS의 스크롤 휠이나 안드로이드의 시트처럼 운영체제의 선택 창을 열지만, 맞춤형 선택 목록은 이를 사용하지 않고 페이지 안에 목록을 그린다. 마우스나 트랙패드가 있는 기기에서만 맞춤형 표시를 적용하면 터치 기기는 기본 선택 창을 유지할 수 있다. 글에서는 다음과 같은 미디어 쿼리를 제시한다.
@media (hover: hover) and (pointer: fine) { select, ::picker(select) { appearance: base-select; } } /* Or we can rely on the window size */ @media (min-width: 768px) { select, ::picker(select) { appearance: base-select; } }
터치 기기에서는 옵션의 추가 표시 없이 텍스트만 보이므로, 각 옵션 문구는 그 자체로 의미가 통해야 한다. 지원하지 않는 브라우저에서도 일반 선택 목록으로 표시되고 옵션 텍스트와 제출 값은 유지되므로 폴리필은 필요하지 않다고 설명한다. 예시 페이지의 맞춤형 선택 기능은 모든 기기에서 활성화되어 있다.
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요