Vous pouvez enseigner à des navigateurs plus anciens pour gérer correctement HTML5.
Support du navigateur HTML5
HTML5 est prise en charge dans tous les navigateurs modernes.
En outre, tous les navigateurs, anciens et nouveaux, gérer automatiquement les éléments non reconnus comme des éléments en ligne.
En raison de cela, vous pouvez "teach" les anciens navigateurs à gérer "unknown" des éléments HTML.
Vous pouvez même enseigner IE6 (Windows XP 2001) comment gérer les éléments HTML inconnus.
Définir HTML5 éléments comme éléments de bloc
HTML5 définit huit nouveaux éléments HTML sémantiques. Tous ces éléments sont au niveau des blocs.
Pour assurer un comportement correct dans les anciens navigateurs, vous pouvez définir la propriété d'affichage CSS pour bloquer:
header, section, footer, aside, nav, main, article, figure {
display: block;
}Ajout de nouveaux éléments au format HTML
Vous pouvez également ajouter tout nouvel élément HTML avec un tour du navigateur.
Cet exemple ajoute un nouvel élément appelé <myHero> en HTML, et définit un style d'affichage pour elle:
Exemple
<!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> Essayez vous - même » L'instruction JavaScript document. createElement("myHero") document. createElement("myHero") est ajouté, pour satisfaire IE.
Problème avec Internet Explorer
Vous pouvez utiliser la solution décrite ci-dessus, pour tous les nouveaux éléments HTML5, mais:
Internet Explorer 8 et plus tôt, ne permet pas le style d'éléments inconnus.
Heureusement, Sjoerd Visscher a créé le "HTML5 Enabling JavaScript" de the shiv "HTML5 Enabling JavaScript" , " the shiv ":
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->Le code ci - dessus est un commentaire, mais les versions antérieures à IE9 lire (and understand it) .
The Complete Shiv Solution
Exemple
<!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> Essayez vous - même » Le lien vers le shiv code doit être placé dans la section <head> élément, car Internet Explorer a besoin de connaître tous les nouveaux éléments avant de les lire.
Un squelette HTML5
Exemple
<!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> Essayez vous - même »