CSS로 기기 파악하기

반응형 웹이란 말은 이제 쓰는 것조차 이상하게 느껴질 정도로 디스플레이의 크기에 맞는 화면을 보여주는 건 당연시되고 있습니다.

근데 단순히 디스플레이의 크기에만 모든 디자인을 맞추는 게 정답이 아닐 때가 종종 있습니다.
예를 들어 사진만 표시되다 커서를 올리면 텍스트를 출력하는 등 다양한 상황에 :hover 선택자를 활용해 디자인하는데, 터치스크린에서 꾹 누르는 동작 등도 hover로 인식하기에 마우스 등의 장치가 없을 땐 의도치 않은 사용자 경험을 선사하기도 합니다.
물론 max-width나 min-width같은 미디어 쿼리를 이용해 화면 크기로 대충 컴퓨터인지 아닌지 판단하고 작업해도 꽤 높은 확률로 적중하긴 하지만, transitionend나 animationend 같은 이벤트 대신 setTimeout같은 타이머를 활용해 애니메이션이 끝날 걸 예측하는 찜찜한 기분을 지울 수 없습니다.

"ontouchstart" in window나 navigator.maxTouchPoints > 0 같은 방식으로 JS에서 터치가 가능한지 판단하는 것도 방법이지만, CSS만으로도 이 작업이 가능합니다.

Interaction Media Features

Interaction(상호작용) 미디어 쿼리를 이용하면 사용자가 웹페이지와 어떻게 상호작용하는지 CSS에서 판단할 수 있습니다.

기본 장치 중심

후술할 pointer와 hover는 "기본(primary)" 포인팅 장치가 어떤 특성이 있는지 확인합니다.

참고: CSS 명세서엔 기본 장치를 어떻게 결정할지는 정의되어있지 않습니다. 사용자가 현재 어떤 상황인지에 따라 브라우저가 동적으로 판단하고 변경할 수도 있단 뜻입니다.

pointer

마우스와 같은 포인팅 장치의 존재를 판단하는데 사용됩니다. 상술했듯 "기본" 장치의 특성을 확인합니다.

none

포인팅 장치가 없습니다.

coarse

기본 장치가 터치스크린이나 키넥트처럼 정확도는 높지 않지만 포인팅은 가능합니다.

fine

기본 장치가 마우스나 터치 패드처럼 정확한 포인팅이 가능합니다.

참고: UA가 사용자에게 확대/축소 기능을 제공하거나, 정확도가 높은 보조 장치가 있을 수 있으므로, pointer: coarse라고 반드시 모든 상황에서 pointer: fine보다 포인팅 정확도가 낮은 것은 아닙니다.

hover

사용자가 요소 위로 포인팅 디바이스를 위치시킬 수 있는지 판단하는 데 사용됩니다. 쉽게 말하면 그냥 문자 그대로 hover가 가능한지 판단하는 것이고, pointer와 마찬가지로 "기본" 장치의 특성을 확인합니다.

none

기본 장치가 호버가 불가능하거나, 포인팅 장치가 없습니다.
혹은 호버가 가능한 장치가 있으나, 꾹 누르는 동작이 호버로 인식되는 터치스크린처럼 불편하거나, 일반적이지 않은 방식으로 호버가 가능한 장치입니다.

hover

기본 장치로 요소(페이지의 특정 영역)에 정확히 호버가 가능합니다.

보조 장치까지 고려하기

any-hover, any-pointer

상술한 쿼리가 기본 장치만으로 판단을 내렸다면, 위 쿼리는 모든 입력 메커니즘을 확인합니다.
가능한 모든 장치를 고려하기 위해 가능하면 위 쿼리의 사용을 권장합니다.

any-pointer, any-hover 모두 상술한 쿼리와 보조 장치 고려 여부만 제외하면 같습니다. 여러 포인팅 장치 중 적어도 하나가 해당 특성을 만족하면 해당 기능을 지원한다고 판단합니다.

직접 확인하기

예로부터 백문불여일견이라 했습니다.
사용하시는 장치의 입력 메커니즘에 따라 바뀌는 페이지입니다. 특성을 만족하지 않으면 회색, 만족하면 연보라색으로 표시됩니다.
개발자 도구를 이용해 UA를 변경해도 정상적으로 작동합니다.

전 본가에 내려가면 wii로 접속해볼 예정입니다. 😎