HTML5와 CSS3를 사용하지 않는 이유

위 통계는 필자 블로그의 최근 한 달 동안의 구글애널리틱스로 본 수치인데, 이 블로그는 익스플로러 사용자는 많은데 익스플로러 7,8 사용자가 많다는 것을 알 수 있다. 다른 블로그도 필자와 비슷하여 익스플로러 7,8이 많다.  참고로 통계수는 방문자는 3만명이 넘으니 충분할 것이고 최근 한 달이니 통계에는 큰 이상이 없을 것 같다.

- HTML5와 CSS3 지원 약함 -

익스플로러 9 이상이 아닌 익스플로러 7,8은 HTML5와 CSS3 지원이 적습니다.  익스플로러 7,8과 익스플로러 9,크롬,사파리,파이어폭스 등의 브라우저에서 HTML5/CSS3 지원여부를 http://www.findmebyip.com/litmus/ 에서 확인할 수 있다. 거기를 보면 CSS3와 html5는 익스플로러 7,8에서는 지원이 적다고 하기보다는 전멸이라고 하는 것이 좋을 것 같다. 그래서 필자는 HTML5와 CSS3로 만든 스킨과 스크립트를 거의 사용하지 않는다. HTML5와 CSS3를 사용한 스크립트를 익스플로러8로 보면 완전 별로다. 브라우저의 태그와 CSS지원에 대한 자세한 것은 아래의 링크를 참고 하기 바란다. 위에 소개한 페이지는 간단히 설명한 페이지이다.

• http://caniuse.com/

예로 아래 페이지 스크립트를 CSS3와 HTML5 를 많이 지원하는 익스플로러 9 이상,크롬 등의 브라우저로 보면 탄성이 나올 정도로  멋지게 보인다. 그러나 익스플로러 7,8에서 지원하지 않는 CSS3과 html5를 사용한지라 필자의 한 익스플로러 8로 보면 익스플로러 9이상이나 크롬 등으로 본 것과 완전 다르다. 과장하자면 사기(?)라고도 할 것이다. 그리고 아래 페이지는 익스플로러 9 이상이 아닌 익스플로러 8이하의 브라우저는 접속할 수 없다. 

• http://tympanus.net/Tutorials/3DHoverEffects/ : CSS3 사용한 3D
• http://tympanus.net/Development/GammaGallery/ : HTML5를 사용한 롤오버

가끔 HTML5와 CSS3을 많이 사용한 스킨을 보는데 정말 멋진 것은 인정하는데 사용을 적극 권하지 않는다. 왜냐하면 위에서 말했듯이 우리나라는 익스플로러 7,8 사용자가 많기 때문이다. 만약 익스플로러 9이상,크롬,사파리,파이어폭스 등에 잘 보이는 블로그나 사이트를 만드는 것이라면 권한다. 

그리고 HTML5와 CSS3를 많이 지원하는 버전이 높은 익스플로러나 익스플로러외 브라우저를 사용하다보면 다른 브라우저에서도 잘 보인다고 착각하는 경향이 생긴다.  필자의 블로그도 PC 방 등에서 보면 아무것도 아니다. 특히 고려대상이 아닌 브라우저가 아닌 익스플로러6에서 보면....그리고 해상도를 1024*768에서 본다면 불편하다.

여담인데 필자는 글상자를 둥글게 했는데 CSS3가 되는 익스플로러 9이상,크롬,사파리,파이어폭스 등에서는 그림자를 주었다. 만약 이 글상자가 둥글게 한 것만 보인다면 익스플로러8 이하버전일 것이다. 그리고 스크립트가 충돌돼 스크립트로 둥글게 안될때는 CSS3로 둥글게 할 수 있으니 좋더라고요. 라이트박스(lightbox) 적용중 - 채은,채윤,채현 페이지는 jquery를 사용한 둥글게 하는 것은 스크립트 충돌도 안돼 익스플로러8이하에서는 글상자가 둥글게 안되지만 CSS3가 되는 익스플로러 9이상,크롬,사파리 등 브라우저에서는 각진 글상자가 둥글게 보일 것이다.

우리나라에서는 익스플로러 7,8 사용자가 많다는 것이 안타깝다. 그러면 HTML5나 CSS3를 사용하는데 상당히 어렵다. 많은 스크립트를 CSS3로 쉽게 할 수 있는 것이 많은데 익스플로러 6,7,8에 적절하게 만들어야 하니....

아래 스크립트롤 이미지에 마우스 포인터를 대면 이미지위에 아이콘이 나타나는 것으로 CSS3로 하면 되는데,익스플로러 7,8을 위해서는 jquery를 이용할 수 없다는 것이 아쉽네. 

• http://webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3/

HTML5와 CSS3를 사용하고 싶은데 우리나라 사람이 많이 사용하는 익스플로러 6,7,8가 HTML5와 CSS3의 속성과 선택자를 지원하지 않는 것이 거의 없기 때문이다. 익스플로러에 고생길이.