웹브라우저별 CSS 호환성을 확인해보자.
스킨 만들어 배포하다보면 제일 많이하는 질문이 IE에서 CSS 일부가 적용되지 않는다는 것입니다.
크롬에서는 미리보기대로 나오는데 IE에서는 안나와요. 뭐 이런...
제가 만들어 배포하는 스킨중 절반 정도는 IE 11에서 몇가지 이펙트가 적용되지 않습니다.
기능적으로 쓰는데는 문제가 없지만, 미리보기에서 화려하고 보기좋았던 레이아웃이 IE 11에서는 안먹는 경우가 있습니다.
IE 11 은 2013년 말에 나왔습니다.
만 5년된 브라우저이고, 그 이후 IE 11은 기능적으로 추가된 내용이 전혀 없습니다.
보안 패치만 간혹 이루어질뿐...
따라서 최근 5년간 HTML과 CSS에서 개선된 기능들은 전혀 반영이 안되어 있습니다.
최근 기술추이를 보면 웹의 세상에서 5년은 영겁의 시간입니다.
CSS 쪽에서는 특히 CSS3에서 여러가지 비약적인 기능 개선들이 이루어졌는데 IE 11에서는 하나도 반영되지 않았습니다.
곧 CSS4가 나오면 아마 더 대책이 없는 상태가 되지 않을까 싶습니다.
오픈소스 진영의 파이어폭스도 마찬가지입니다.
무슨 똥고집인지 크롬과 사파리에서 지원하는 주요 CSS 개선사항들중 표준으로 완전히 확정되지 않은 것들은 배제를 하고 있습니다.
전처럼 -moz 붙여서 일단 지원해주면 좋을텐데 최근에는이런 작업들이 잘 이루어지지 않고 있습니다.
오픈 커뮤니티도 좋고, 표준으로 확정된 것만 따르는 것도 좋은데 점점 시대에 뒤쳐져가면서 시장에서의 지위를 잃어가고 있습니다.
스킨 작업을 하면서 최신 CSS 속성을 쓰게 되면 가장 먼저 확인을 하는게 CSS 호환성입니다.
호환성 확인은 100% 아래 사이트에서 합니다.
https://caniuse.com
영어로 되어 있지만 몰라도 사용하는데 아무 문제 없습니다.
CSS 속성을 입력하면 현존하는 대부분의 메이저 브라우저의 버전별 지원여부를 1개의 표로 요약해서 보여줍니다.
관련된 이슈가 뭐가 있는지도 하단에 요약해서 알려줍니다.
지원여부 확인보다 더 중요한게 지역 체크를 해서 해당 국가나 지역에서 지원율이 얼마나 되는지를 알려줍니다.(캡쳐 화면 우측 상단)
접속 지역이 한국일 경우 처음 접속하면 지역이 한국이 맞는지 한번 확인을 합니다.
이후 부터는 글로벌 지원율과 한국 징쳑 지원율을 퍼센트로 알려줍니다.
저는 이걸 기준으로 새로운 CSS 속성을 쓸지 말지를 결정합니다.
위에 썼듯이 IE에서는 최근 5년간 새로나온 CSS 속성들은 대부분 지원되지 않습니다.
그리고 표준으로 아직 확정되지 않은 속성들이나 크롬이나 웹킷에서만 선지원되는 속성들도 파이어폭스에서는 지원되지 않습니다.
저는 평균적으로 글로벌 85% 이상 한국지역 75% 이상이면 일단 사용합니다.
5년넘게 업데이트가 없는 IE 따위는 지원할 생각이 없습니다.
IE 점유율 차이로 인해 글로벌과 한국은 10~15% 의 지원율 차이를 보입니다.
최근 5년내에 나온 CSS 속성은 거의 일정합니다.
CanIUse 사이트에서는 전체 풀스펙 지원은 안하더라도 일부 스펙이라도 지원하는 경우 구분을 해서 표시를 해주기 때문에 IE 의 버전별 지원 정도도 어느정도는 확인할 수도 있습니다.
캡쳐 화면 우측 상단을 보면 지원율 퍼센트 값에 + 퍼센트로 약간씩 더하기를 하는 것이 있는데 이것이 일부만 지원하는 경우에 대한 추가 합계 입니다.
지원 챠트를 보면 진한 녹색은 100% 지원 연두색은 일부 지원, 빨강색은 미지원 이렇게 구분을 합니다.
중요 속성만 몇개 체크를 해보면 지원 정도가 얼마나 차이나는지 바로 확인할 수 있습니다.
transition
은 IE 10 까지는 미지원 - CSS로 애니메이션 효과나 화면 전환 효과를 준 것이 IE 10 이하에서는 전혀 보이지 않습니다.
filter
IE 11 까지는 미지원. 엣지도 일부만 지원. 엣지는 테스트해본바로는 그럭 저력 복잡한거 아니면 적용이 되기는합니다. 마이크로소프트는 웹브라우저는 손을 놓은걸 확인할 수 있습니다.
HTML에 CSS 적용하면서 어느정도까지 써도 되는지, 또는 어떤 웹브라우저에서 지원이 되는지 궁금하면 caniuse.com 에서 확인하면 됩니다.
단언컨데 이 사이트가 원탑입니다.