html5shiv 소개
존 레식(John Resig)이 처음 개발하고 레미샤프(Remi Sharp)가 완성한(? 정확하지 않음) 자바스크립트로서, 새로운 HTML5 섹셔닝 요소를 이전 버전의 IE6~9, Safari 4.x(iPhone 3.x)와 Firefox 3.x 에서도 작동하도록 해주는 라이브러리이다.
위의 GitHub 저장소에 들르면 자세한 설명과 다운로드가 가능한데(물론 영문) 아래에서 필요한 내용을 간단히 정리한다.
html5shiv.js
간단히 다운로드 받은 파일을 설명한다.
기본적인 createElement() 기술과 IE6~8에서 기술 적용을 위해 document.createElement와 document.createDocumentFragment를 monkeypatches와 함께 포함하고 있다. 또한 IE6-9, Safari 4.x and FF 3.x에 대한 기본적인 스타일링을 제공한다.
html5shiv-printshiv.js
html5shiv.js 파일의 모든 것과 IE6~8에서 인쇄될때, HTML5의 새로운 요소들에 대하여 스타일 및 자식을 가질 수 있도록하는 매커니즘을 포함한다.
html5shiv 사용법
다운로드한 파일의 dist 폴더에서 사용할 파일을 선택한 후 <head>부분에 아래와 같이 적용한다.
<head>
<!--[if lt IE 9]>
<script src="경로명/html5shiv.js"></script>
<![endif]-->
</head>
이 코드를 사용한 경우 CSS에서 해당 블럭요소들을 display:block 해주어야 한다.
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {display: block;}
만일 Modernizr를 사용한다면 html5shiv를 코어에 포함시킬 수 있다.
html5shiv 알려진 문제와 제한사항
ShivMethods옵션(document.createElement)과html5.createElement메소드는 부모노드를 가진 분리되지 읺은 요소를 생성한다(#64를 확인하라).- 복제노드(cloneNode)의 문제는 현재 HTML5 Shiv에 의해 해결되지 않는 문제이다. HTML5 요소는 동적으로 생성 될 수 있지만, 모든 경우에 복제되진 않는다.
- HTML5 Shiv의 printshiv 버전은 인쇄 스타일과 인쇄 전체 DOM을 변경한다. 이것은 복잡한 웹사이트나 많은 양의 인쇄 스타일을 가질경우 성능 및 스타일 문제가 발생할 수 있다. 해결방법은 IE6~8에 대한 인쇄 스타일을 구현하는 또 다른 기술인 HTML5 Shiv의 htc-branch를 사용하는 것이다.
'웹개발론 > 크로스브라우징' 카테고리의 다른 글
| Selectivizr - CSS3 선택자 크로스브라우징 (0) | 2015.05.19 |
|---|---|
| IE7.js - HTML5 요소 및 CSS 선택자 크로스브라우징 (3) | 2015.05.18 |
| 폴리필(polyfill) (3) | 2015.05.15 |
| HTML5 기능 감지 - 수동 (0) | 2015.04.17 |
| IE6 position fixed (0) | 2013.01.02 |
