본문 바로가기

Development/HTML

IE8 이하에 HTML5 적용

아직까지 불안감이 없지 않아 있는 IE9 이하에서의 HTML5 문서적용이다.

해서 구글링을 하다보니, 구글에서 HTML5 문서구조를 지킬 수 있는 형태의 스크립트를

제시하고 있었다.


먼저 기본적으로 많이 알려진 IE8 이하에서 존재하지 않는 HTML5의 요소들.

nav , article, section 등등의 요소들을 사용가능토록 하는 스크립트이다.


http://html5shiv.googlecode.com/svn/trunk/html5.js


이 스크립트 파일로 인해서 HTML5 에 요소가 활성화 된다.

여기서 주의할것은 본래 스크립트는 파싱절차가 있기에 문서 하위단에

링크를 연결해주도록 하는게 좋으나, 위 스크립트는 아마도 요소 재정의에

가깝기에 head 단에서 연결해주도록 하는 것이 맞는것 같다.

여기서도 이 스크립트를 로드할때는 조건부 주석으로 제어하여 로그하는게 옳다.


<!--[if lt IE 9]>

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

<![endif]-->


CDN 이 싫을 경우에는 스크립트 파일을 받아서 링크하는것도 괜찮다. 개인적으로는 CDN 보다는

받아서 캐쉬를 이용하는게 더 빠른 느낌이다.

어디까지나 개인적이니, 테스트가 필요.


그러나 동적으로 head 단에 link 요소를 이용하여 추가하는데에는 IE8에서는 무리다. 최초

이 스크립트가 먼저 작동을 해야 하기 떄문이다.


그리고 이 스크립트로 추가된 엘리먼트에는 기본적으로 display:block 속성이 설정되어있어야 한다.


article,aside,canvas,details,figcaption,figure, footer,header,hgroup,menu,nav,section,summary { 

    display:block;

}