본문으로 바로가기

html5shiv 소개

존 레식(John Resig)이 처음 개발하고 레미샤프(Remi Sharp)가 완성한(? 정확하지 않음) 자바스크립트로서, 새로운 HTML5 섹셔닝 요소를 이전 버전의 IE6~9, Safari 4.x(iPhone 3.x)와 Firefox 3.x 에서도 작동하도록 해주는 라이브러리이다.

위의 GitHub 저장소에 들르면 자세한 설명과 다운로드가 가능한데(물론 영문) 아래에서 필요한 내용을 간단히 정리한다.

html5shiv.js

간단히 다운로드 받은 파일을 설명한다.

기본적인 createElement() 기술과 IE6~8에서 기술 적용을 위해 document.createElementdocument.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를 사용하는 것이다.



댓글을 달아 주세요

  1. 뱅리 2016.02.21 04:12 신고

    내용 잘 보았습니다.

    다른 사이트의 내용을 보니, 단순히 .js 파일만 추가하고

    언급하신

    "CSS에서 해당 블럭요소들을 display:block 추가 " 와 관련한 내용은 없던데,
    어떤 것이 정확한 것일까요?

    -> html5shiv doc 을 읽어보니,

    window.html5 = {
    'shivCSS': false
    };

    과 같은, 수동 설정이 있어 보이는데요. 이걸 설정하면 블로그에 나온 display:block 요소들을 해준다는
    내용 같기도 해 보이네요.

    1. 만약 이 옵션을 수동으로 설정하면 CSS 에서 명시적으로 display:block 을 해주지 않아도 되나요?
    2. 옵션을 사용하지 않는다면, 해당 태그는 당연히 inline 형태로 처리가 되겠죠?

    • BlogIcon 흉내쟁이 2016.02.21 04:24 신고

      말씀하신 옵션부분은 전에는 확인할 수 없는 부분이였는데 새로 추가된 사항인가 보네요.

      1. 굳이 옵션처리를 html5Shive API를 이용할 필요는 없습니다만 원하신다면 사용하셔도 되겠죠. 문서에 적혀있듯이 대부분 display:block 으로 처리될 것으로 사료됩니다.

      2. 옵션을 미사용시에는 브라우저의 처리를 따릅니다. 구 IE에는 어떻게 작동될지 모르겠습니다. CSS를 이용한 처리는 무엇보다도 성능향상에 도움이 됩니다. CSS로 할 수 있는 일을 굳이 스크립트를 통해 하려고 하지 않는게 좋을거라 사료됩니다.

티스토리 툴바