Doğru HTML5 işlemek için eski tarayıcıları öğretebilir.
HTML5 Tarayıcı Desteği
HTML5 tüm modern tarayıcılarda desteklenir.
Buna ek olarak, eski ve yeni tüm tarayıcılar, otomatik satır içi elemanlar olarak tanınmayan unsurları ele.
Bu nedenle, şunları yapabilirsiniz "teach" işlemek için eski tarayıcıları "unknown" HTML öğelerini.
Hatta IE6 öğretebilir (Windows XP 2001) bilinmeyen HTML öğelerini nasıl işleneceğini.
Blok Elements gibi HTML5 Elements tanımlayın
HTML5 sekiz yeni semantik HTML öğelerini tanımlar. Bütün bu blok düzeyi öğeleridir.
Eski tarayıcılarda doğru davranış güvenceye almak için, Engellemek CSS ekran özelliği ayarlayabilirsiniz:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
HTML Yeni Öğeleri Ekleme
Ayrıca tarayıcı hile ile HTML herhangi yeni bir unsur ekleyebilir.
Bu örnek denilen yeni bir öğe ekler <myHero> HTML ve bunun için bir görünüm stili tanımlar:
Örnek
<!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>
Kendin dene " JavaScript deyim document. createElement("myHero") document. createElement("myHero") sadece IE karşılamak için eklenir.
Internet Explorer ile Problem
Tüm yeni HTML5 öğeleri için, yukarıda açıklanan çözüm verebilirdim ama:
Internet Explorer 8 ve daha önceki, bilinmeyen elementlerin stil izin vermez.
Neyse ki, Sjoerd Visscher yarattı "HTML5 Enabling JavaScript" , " the shiv ":
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Yukarıdaki kod bir yorumdur, ama IE9 önceki sürümleri okuyacak (and understand it) .
Komple Shiv Çözüm
Örnek
<!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>
Kendin dene " Link shiv kodunda yerleştirilmelidir <head> Internet Explorer bunları okumadan önce tüm yeni elemanlarının tanınması gerektiğinden, eleman.
HTML5 İskelet
Örnek
<!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>
Kendin dene "