HTML5 크로스브라우징

HTML5 크로스브라우징

html5shiv, ie9.js, ie7.js, modernizr, and css3pie(출처)

<!-- Load jQuery Here -->
<!--[if lt IE 9]>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js"></script>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

* html5shiv

HTML5 요소를 지원하지 않는 브라우저에서 해당 요소를 지원할 수 있게 해주는 라이브러리.

* ie9.js, ie7.js

IE를 사람답게(...) 만들어 주는 라이브러리. 구버전의 Internet Explorer에 있는 HTML 및 CSS issue들을 fix함. 투명 png에 대한 부분에 대해 처리.

단순히 head 부분에 위 구문을 집어넣으면 된다.

* Modernizr

HTML5 & CSS3을 지원하는지를 체크해 줌.

html5shiv를 포함하고 있음. 그리고 많은 일을 하지만, 딱히 html5의 많은 요소들을 쓰는 것이 아니라면 사용하지 말 것. 왜냐하면 페이지 속도가 느려지기 때문임. 하지만 그만큼의 가치가 있다고 판단되면 쓰는 것을 권장.

* css3pie

CSS3 요소를 지원하지 않는 브라우저에서 CSS3 요소를 사용할 수 있게 해주는 라이브러리.

http://www.css3pie.com

* Modernizr vs. css3pie

  Modernizr - 안되면 패스. 하지만 되는 부분에 대해서는 확실하게 될 수 있도록?

  css3pie - 무조건 되게 해 주세요. 뭐든지간에 되게 해 달란 말이에요 징징

결론:

구 버전의 브라우저를 지원해야 할 필요가 있는 경우에만 부분 부분적으로 include하는 것을 권장. 기본적으로는 html5shiv+ie9.js 를 사용하고, 필요한 경우에만 Modernizr를 사용할 것.

그리고 html5shiv+ie9 의 경우에는 관련 소스들을 jQuery보다 뒤에 넣을 것.