@supports 는 Edge, iOS 14.5, Android 4.5 부터 사용가능

#2166

올 한 해 동안(벌써 한 해가 지고 있다니...) 은행권에서 일하고 있다 보니 상당히, 상당히 보수적인 코딩만 하게 되면서 새로운 지식을 흡수하는데 인색하게 된 것 같아 공부를 하게 되었다.

하위 버전에 대한 고민도 필요하니 보수적으로 가는 것이 틀리지 않지만 새로운 것을 접하는데 과민하게 반응하시는 분들도 있어 실제 프로젝트에 도입할 수 있는 신규 기술은 무엇이 있을까 싶어 찾아보게 되었고, 그러던 와중에 알게 된 supports. 브라우저 별로 스타일을 구분시키는 방식인데 굳이 hack을 사용하지 않아도 되는 공식적인 hack이라고 할까... 모더나이저를 사용하지 않고도 가능하니 이런저런 라이브러리를 까는데 거부감이 있다면 초반에 나쁘지 않은 선택이 될 수도 있을 것 같아 보였다.

@supports

우선, 실행 결과는 다음과 같다. 크롬과 IE11에서 동일한 소스를 표시했을때 적용된 스타일이 상이함을 확인할 수 있다.

크롬과 IE에서 스타일이 다르게 적용된다.

잘 적용된다. 이 정도면 예전처럼 모더나이저와 같은 라이브러리를 설치해서 지원하지 않는 브라우저의 구분자를 선택 후 지정하던 방식을 사용하지 않더라도 좀 더 수월하게 분기 작업이 가능해진다. 무척 유용하게 사용할 수 있으니 이런 것이 있다는 것을 기억해 두었으면 좋겠다.

간단한 주의 사항

실제로는 좀더 다양한 브라우저에서 다양한 결과를 토대로 확인해야겠지만, 우선 잘 잘 적용되는 것 같으며 이런 기능이 필요한 프로젝트는 바로 실무에서 사용해도 큰 무리는 없을 것 같아 보인다.

@supports의 위치는 항상 아래쪽에 위치하게 해야 한다. 시험 삼아 @supports를 기본 스타일의 위쪽에 위치시켜 봤더니 크롬에서도 CSS의 규칙에 의해 하위에 위치한 스타일이 최종적으로 적용되어 @supports가 @supports not 상태로 스타일이 적용되는 것을 확인할 수 있었다.

브라우저 지원 여부 확인 필수

2021년 11월 현시점 기준으로, 안드로이드 4.4.4를 지원하지 않는 부분에 주의가 필요하다. 지원 여부를 꼭 확인해야 한다. 무조건 최신만 고집해서는 큰일 난다는 이야기. 브라우저 셰어율을 본다면 아직까지 4.3이나 그 이하 버전도 사용자가 있는 만큼 무시할 수는 없겠다.

caniuse와 mdn에서 적용 가능 범위를 확인해 보았고 결과는 다음과 같다.

caniuse

mdn

또 한가지 고려해볼 사항

하나의 기술을 사용하기 좋다고 무작정 사용하기엔 우리의 고객님들이 너무 다양하시니..

국내 안드로이드 사용 현황

by statcounter.com

by statcounter.com

세계 기준 사용 현황

by statcounter.com

by statcounter.com

간과해선 안될 것이 이건 어디까지나 통계적인 기준이기 때문에 절대적인 기준점이 될 수는 없다. 회사에서 사용 중인 통계를 근거로 사용자들을 파악한 뒤에 이런 통계치와 대조해 보고 나서 어디까지 버리고 어디까지 가지고 갈지를 정해야 하겠다. 그리고 하위 버전을 버린다면 어떤 형식으로 버릴지도 기획 단계에서의 고민이 필요한 사항이라 여겨진다.