잇스쿨

[크로스브라우징] HTML5 미지원 브라우저에서 HTML5 요소를 사용하기 본문

광범위하다 너란 Web../크로스브라우징

[크로스브라우징] HTML5 미지원 브라우저에서 HTML5 요소를 사용하기

잇님 2019. 3. 28. 23:03

 

1. HTML5요소의 브라우저 지원

- 대부분의 브라우저에서 지원이 가능함

 

- 모든 브라우저 호환을 고려하여 지정된 DTD 정의 사용

<!DOCTYPE html>

 

- charset, script, style의 경우도 동일

<meta charset="utf-8">

<script type="text/javascript">  </script>

 

- createElement로 추가된 요소 사용 가능

<!--[if lt IE 9]>
  <script>
    document.createElement("header");
    document.createElement("footer");
    document.createElement("section"); 
    document.createElement("aside");
    document.createElement("nav");
    document.createElement("article"); 
    document.createElement("hgroup"); 
    document.createElement("time");
  </script>
<![endif]-->

 

2. HTML5 shiv를 사용하여 모든 요소 지원 가능

<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

 

3. reset.css에 스타일 정의

header, main, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display: block;}

 

- 기본적으로 display:inline 으로 표시되기 때문에 위와 같이 CSS 스타일을 지정

 

 

4. HTML5 Boilerplate를 사용하여 셋업

- 기본적으로 display:inline 으로 표시되기 때문에 위와 같이 CSS 스타일을 지정

- CSS reset

- HTML5 shiv

- Modernizr

- jQuery

- respond.js

- Chrome frame for IE6

저작자표시 비영리 변경금지