HTML5와 CSS3, jQuery 사용시 생각할 사항 2

2013/04/16 - 익스플로러,jQuery 사용시 생각할 사항 1에서 우리나라 사람은 익스플로러 6,7,8,9를 사용하는 사람이 많다는 것을 알아야 한다. 

여기에서 알아야 할 것이 jQuery 플러그인에서 많이 사용하는 HTML5와 CSS3의 속성중에 익스플로러 6,7,8,9는 지원하지 않는 속성과 선택자를 많이 사용한다는 것이다. 내가 jQuery 플러그인을 만드는 것이 아니라서 익스플로러 6,7,8를 고려하라고 하지는 못한다.아래에서 익스플로러에서 지원하지 않는 속성과 치환자로 jQuery를 사용했을 때 어떻게 보이는지 볼 것이다. 참고로 아래에  더보기를 클릭하면 윈도우별 기본 브라우저에 대해서 적었다.

• 윈도우 XP - 익스플로러 6 : 우리나라 사람이 윈도우7 다음으로 많이 사용하는 윈도우 XP에서는 최대로 익스플로러 8까지만 설치할 수 있다. 아마 대부분의 사무실의 컴퓨터는 윈도우XP일 것이다.
• 윈도우 Vista - 익스플로러 7
• 윈도우 7 - 익스플로러 8
• 윈도우 8 -익스플로러 10

지원하지 않는 CSS3의 Transforms을 사용했다면

익스플로러(IE) 6,7,8에서 안 되는 것 일부를 알아보겠다. 아래 보이는 아이콘에 마우스 포인터를 올려보아라. 회전하는 반응이 없다면 익스플로러 6,7,8이다. 익스플로러 6,7,8는 CSS3의 Transforms 속성을 지원하지 않는다. 만약 jQuery에서 transforms 속성을 사용했다면....

익스플로러9에서는 Transforms 속성을 지원하나 제대로 안 나오는 것 같다. 왜냐하면 소스를 제공한 곳에서는 익스플로러 10에서 제대로 볼 수 있다고 하고 있기 때문이다. 자세한 것 모르겠는데, 익스플로러9에서는 단독으로 tranform을 사용할 수 없고 -ms-transform을 사용해야 되니 불완전한 것 같다. 

이런 효과가 익스플로러 6,7,8에서는 구경할 수 없어 아쉽고 9에서도 베스트로 보이지 않는다니 아쉽다. 위의 효과에 대한 소스는 여기에서 구할 수 있고, 그 페이지는 영어이다. 영어에 어려움이 있다면 아래 글이 도움이 될 것이다.

•  2013/03/03 - 번역,영어를 포함한 언어를 번역....

지원하지 않는 CSS3의 Transitions과 Transforms을 사용했다면

아래의 아이콘에 마우스 포인터를 올려보아라. 아이콘이 확대되는 반응이 없다면 익스플로러 6,7,8일 것이다. 이것에 대한 소스는 여기에서 구할 수 있고 페이지는 영어이다.  아래 아이콘에 사용한 것은 익스플로러 6,7,8에 지원하지 않는 CSS3의 Transform과 Transition을 사용한 것이다. 그리고 익스플로러9에서 지원하지 않는 CSS3의 transitions 속성을 사용했다. 만약 jquery가 transitions과 transforms을 사용했다면 어떻게 되겠는지 생각해 봐라. 참고로 이 블로그 사이드바에 있는 엠블렘이 확대되는 것도 이것을 사용한 것이다.

CSS3의 속성	익스플로러(IE) 6,7,8 지원여부	익스플로러(IE) 9 지원여부
transforms	×	○
transitions	×	×

아래 1,2번은 transforms와 transitions을 익스플로러 6,7,8에서 지원하지 않아 아예 효과가 나타나지 않는 것이 아니라 화면에 나타나지 않는다. 

1. http://tympanus.net/Tutorials/SwatchBook/
2. http://tympanus.net/Tutorials/CircleHoverEffects/

직접적인 예로 이 블로그에 상단의 공지사항에 사용한 것은 jQuery에 CSS3의 Transforms와 Transitions를 사용한 것인데 익스플로러에 6,7,8,9에서는 완벽하지 않을 것이다. 또한 이 블로그 하단 사진 테두리가 천천히 나타나게 한 효과는 CSS3의 Transitions를 사용한 것인데 익스플로러9에서는 안 될 것이다. 왜냐하면 익스플로러 9는 CSS3의 trasitions를 지원하지 않으니까.

지원하지 않는 CSS3의 Transforms 3D와 Animation

아래의 1번은 CSS3의 Transforms 3D를 이용한 3D롤오버인데 IE(익스플로러) 6,7,8,9에서 지원하지 않는다. 2번은 CSS3의 animation 속성을 사용한 것으로 익스플로러 6,7,8,9에서는 지원하지 않는다. 여기서 CSS3 속성인 transforms 3d와 animation 속성은 익스플로러9에서도 지원하지 않는다. 익스플로러....

1. http://tympanus.net/Tutorials/3DHoverEffects/index2.html
2. http://tympanus.net/Tutorials/AnimatedButtons/

지원하지않는 HTML5의 Audio 태그를 사용한 것

위는 HTML5가 아닌 단지 CSS3에 대해서만 것이었지만 아래는 익스플로러 6,7,8에서 지원하지 않는 HTML5를 사용한 jQuery이다. HTML5의 Audio는 IE 6,7,8에서 지원하지 않는다. 아래 것을 익스플로러8로 보니 카세트 아래에 제어바가 나와야 하는데 계속 로딩화면만 나왔다. 

• http://tympanus.net/Development/CassettePlayer/

아래는 HTML5의 audio와 video 태그를 사용한 것으로 익스플로러8로 재생하면 재생되지 않는다. 크롬에서는 이상없었는데 왜 익스플로러8에서는 이럴까 할 것이다. HTML5의 video 태그는 익스플로러 6,7,8에서 안 된다.

• http://mediaelementjs.com/

결론적으로 전에 말한 것과 합쳐서 말하면 멋진 jquery는 익스플로러 6,7,8,9에서 엉터리로 보이는 경우가 많다는 것이다.때로는 아예 안되는 것도 있다는 것도 알았으면 한다. 익스플로러 6,7,8,9에 만족하는 jQuery를 찾기는 어렵다는 것을 알아야 한다. 윈도우를 설치하면 딸려오는 익스플로러의 낮은 버전의 사용은 어쩔 수 없다.

• 윈도우 XP - 익스플로러 6
• 윈도우 Vista - 익스플로러 7
• 윈도우 7 - 익스플로러 8 
  
• 윈도우 8 - 익스플로러 10

아래는 나의 블로그에 설치한 구글 애널리틱스로 본 사용자의 운영체제(OS) 통계이다. 방문수가 4만이고 기간은 이 글을 발행한 후 한 달이니 충분할 것이다.

그리고 익스플로러 6,7,8,9 외 다른 브라우저인 익스플로러10,크롬,사파리,파이어폭스 등에서는 문제가 없으니 걱정말기 바란다. 참고로 브라우저마다의 HTML5,CSS3 등의 지원여부를 알고 싶으면 아래 링크를 참조하기 바란다.

• http://caniuse.com/

SVG라는 것도 있는데 몰라 설명하지 않는다. SVG를 사용한 아래의 jquery를 익스플로러 6.7,8에서 보면 OTL.아래 페이지를  크롬에서는 아주 멋있었는데  나의 익스플로러 8로 보니 에러가 나와 나오지도 않았다. 참고로 SVG는 익스플로러 6,7,8에서는 지원하지도 않는다.

• http://tympanus.net/Tutorials/InteractiveSVG/

jQuery,CSS3,HTML5 등을 사용한 사이트를 보면 플래시로 만든 사이트 같다. 아래 사이트를 익스플로러 6,7,8로 보면 별로이다. 크롬 사파리,파이어폭스,익스플로러10 등으로 보면 아주 멋질 것이다.익스플로러9는 모르겠는데 위에서 보듯이 익스플로러 9도 별로일 것이라 추측할 수 있다.

• http://tympanus.net/codrops/