CSS 미디어쿼리 Level 4 입력방식으로 기기 구분하기

기존에도 사용하던 방식인데 레벨 4에서 이름이 변경되었습니다. 기기에 따라 화면사이즈의 한계가 있을 수 있기 때문에 화면의 크기에 따른 UI를 설정해야 할 경우가 있습니다. 특히나 터치기기들은 기본 터치를 위한 최소 사이즈가 있기 때문에 기기 구분을 해야할 경우가 자주 생깁니다.

any-hover

미디어 쿼리 any-hover는 사용자의 입력 장치들 중 하나라도 호버링 기능을 갖고 있는지를 확인하는 데 사용됩니다. 호버링(hovering)은 사용자가 입력 장치로 화면의 요소 위를 가리킬 수 있을 때 발생하는 특징입니다. 예를 들어, 버튼이나 앵커같은 링크영역을 마우스로 가리키면 일반적으로 버튼에 특정 효과가 적용됩니다.

 

any-hover 미디어 기능은 2가지 값, 즉 none과 hover를 갖습니다.

• any-hover: none은 사용자의 입력 장치가 호버링을 지원하지 않음을 나타냅니다. 예를 들면, 터치스크린만을 갖고 있는 스마트폰과 같은 경우입니다.
• any-hover: hover는 사용자의 입력 장치 중 하나 이상이 호버링을 지원함을 나타냅니다. 예를 들면, 데스크탑 컴퓨터에 연결된 마우스와 같은 경우입니다.

/* 호버링을 지원하는 장치(마우스 사용)에만 적용될 스타일 */
@media (any-hover: hover) {
    .hover-button:hover {
        width: 30px;
        height: 30px;
    }
}

/* 호버링을 지원하지 않는 장치(손가락 사용)에 적용될 스타일 */
@media (any-hover: none) {
    .hover-button {
        width: 60px;
        height: 60px;
    }
}

 

any-pointer

any-pointer 미디어 쿼리는 사용자의 입력 장치들 중 하나라도 얼마나 정밀한 포인팅(지시) 능력을 가지고 있는지 확인하는 데 사용됩니다. 이를 통해 개발자들은 다양한 입력 장치에 최적화된 사용자 경험을 제공할 수 있습니다.

 

any-pointer 미디어 기능은 3가지 값, 즉 none, coarse, fine를 갖습니다.

• any-pointer: none은 사용자의 입력 장치가 포인팅 능력을 지원하지 않음을 나타냅니다.
• any-pointer: coarse는 사용자의 입력 장치가 대략적인 포인팅 능력을 가지고 있음을 나타냅니다. 예를 들어, 터치스크린과 같이 손가락으로 조작하는 경우입니다.
• any-pointer: fine는 사용자의 입력 장치가 정밀한 포인팅 능력을 가지고 있음을 나타냅니다. 예를 들어, 마우스나 펜과 같이 정밀한 조작이 가능한 경우입니다.

/* 정밀한 포인팅 능력을 가진 장치에 적용될 스타일 */
@media (any-pointer: fine) {
    .button {
    	width: 100px;
        height: 50px;
        background-color: blue;
        color: white;
        font-size: 12px;
    }
}

/* 대략적인 포인팅 능력을 가진 장치에 적용될 스타일 */
@media (any-pointer: coarse) {
    .button {
    	width: 300px;
        height: 100px;
        background-color: blue;
        color: white;    
        font-size: 18px;
    }
}

/* 포인팅 능력을 지원하지 않는 장치에 적용될 스타일 */
@media (any-pointer: none) {
    .button {        
        display: none;
    }
}

 

기존에 사용하던 hover 조건식은 media query level 4에서 삭제되었습니다.

기존에 사용하던 pointer 조건식은 사용가능 하지만 any-pointer를 사용하는 것을 추천합니다.

 

마우스와 터치의 구분은 기기의 구분을 위한 것이라면 정밀한 선택의 구분은 UI의 사이즈 등을 다르게 구현하여 사용자의 불편을 해소하기 위해서 사용합니다.