당신은 제대로 HTML5를 처리하기 위해 이전 버전의 브라우저를 가르 칠 수 있습니다.
HTML5 브라우저 지원
HTML5는 모든 최신 브라우저에서 지원됩니다.
또한, 과거와 현재 모든 브라우저가 자동으로 인라인 요소로 인식 할 수없는 요소를 처리합니다.
이 때문에, 당신은 할 수 있습니다 "teach" 처리하기 위해 이전 버전의 브라우저를 "unknown" HTML 요소를.
당신은 IE6 가르 칠 수 (Windows XP 2001) 알 수없는 HTML 요소를 처리하는 방법.
블록 요소로 HTML5 요소를 정의
HTML5는 여덟 개 새로운 의미 HTML 요소를 정의합니다. 이러한 모든 블록 레벨 요소입니다.
이전 버전의 브라우저에서 올바른 동작을 확보하려면 차단하기 위해 CSS 표시 속성을 설정할 수 있습니다 :
header, section, footer, aside, nav, main, article, figure {
display: block;
}HTML에 새로운 요소를 추가
당신은 또한 브라우저 트릭 HTML로 새로운 요소를 추가 할 수 있습니다.
이 예제라는 새로운 요소를 추가 <myHero> HTML로, 그리고 그것에 대한 표시 스타일을 정의합니다 :
예
<!DOCTYPE html>
<html>
<head>
<title>Creating an HTML Element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html> »그것을 자신을 시도 자바 스크립트 문 document. createElement("myHero") document. createElement("myHero") 단지 IE를 만족시키기 위해 첨가된다.
인터넷 익스플로러와 문제
당신은 모든 새로운 HTML5 요소, 위에서 설명한 솔루션을 사용하지만, 수 :
인터넷 익스플로러 8 이전 버전은 알 수없는 요소의 스타일을 허용하지 않습니다.
다행히, 슈어드 비스쳐 생성 된 "HTML5 Enabling JavaScript" , " the shiv "
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->위의 코드는 주석이지만, IE9 이전 버전을 읽을 것이다 (and understand it) .
완전한 Shiv 솔루션
예
<!DOCTYPE html>
<html>
<head>
<title>Styling HTML5</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h1>My First Article</h1>
<article>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</article>
</body>
</html> »그것을 자신을 시도 받는 링크 shiv 코드는에 배치해야합니다 <head> 인터넷 익스플로러를 읽기 전에 모든 새로운 요소에 대해 알 필요가 있기 때문에, 요소입니다.
HTML5 버전 해골
예
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
<h1>HTML5 SKeleton</h1>
</header>
<nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
<li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</article>
</section>
<footer>
<p>© 2014 w3ii. All rights reserved.</p>
</footer>
</body>
</html> »그것을 자신을 시도