폴리필-polyfill

IE가 문제. 

아직도 IE6을 사용하는 유저도 있는 마당이니. 

크로스 브라우징과, 성능 속도 문제가 신경쓰인다. 

1. html5 미지원 브라우저 

2. css3 미지원 브라우저 

3. 반응형 미디어쿼리 해석 불가 브라우저 

해당 기능이 지원되지 않는 구형 브라우저에서 새로운 기능을 제공하기 위한 플러그인을 사용해서 브라우저가 달라도 같은 결과물을 내기 위한 방법을 Shim, fallback, polyfill 이라 한다. 

What is a Polyfill?  참조 

"poly" - 여러가지 방법 

"fill" - 브라우저의 공백을 메운다는 의미. 

폴리필이란, 브라우저들 간의 지원 공백을 다양한 방법으로 메우는 것. 

크로스브라우징을 위한 폴리필 

- Modernizr : Modernizr에서 제공하는 폴리필 목록을 참고하여 필요한 플러그인을 사용하면 된다. 

* html5shiv  : HTML5의 시맨틱 태그 지원 

* respond : 반응형 웹 구현을 위한 미디어쿼리 IE 6-8 지원 

* css3pie : css3의 border-radius box-shadow, liner-gradient IE6-9 지원 

cdn으로 이용시 HTML문서의 <header>와 </header>사이에 아래 스크립트를 넣어 사용한다.

<!-- IE6~8 HTML5 표시 -->

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<!-- IE 6~8 미디어쿼리 해석 --> 

<!--[if lt IE 9]>

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 

<![endif]-->

<!-- IE6~8 HTML5 표시 -->

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

그냥 이 모든걸 한번에 처리하는 폴리필 스크립트도 있다고 한다. 

user-agent를 참고하는 방식이라, 플러그인이 알아서 접속 브라우저를 판별하여 필요한 것들을 지원하는 방식. 

참고 : Polyfill을 사용하는 보다 쉬운 방법