HTML5 Compatibilité des navigateurs
Vous pouvez apprendre aux anciens navigateurs à gérer correctement HTML5.
Prise en charge des navigateurs HTML5
HTML5 est pris en charge dans tous les navigateurs modernes.
De plus, tous les navigateurs, anciens comme nouveaux, traitent automatiquement les éléments non reconnus comme des éléments en ligne.
Grâce à cela, vous pouvez « apprendre » aux anciens navigateurs à travailler avec des éléments HTML qui leur sont « inconnus ».
Vous pouvez même apprendre à IE6 (Windows XP 2001) à gérer des éléments HTML inconnus.
Définir les éléments sémantiques comme éléments de niveau bloc
HTML5 définit huit nouveaux éléments sémantiques. Ce sont tous des éléments de niveau bloc.
Pour garantir un comportement correct dans les anciens navigateurs, vous pouvez définir la propriété CSS display de ces éléments HTML sur block :
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Ajouter de nouveaux éléments à HTML
Vous pouvez également ajouter de nouveaux éléments à une page HTML en utilisant une astuce du navigateur.
Dans cet exemple, un nouvel élément nommé <myHero> est ajouté à la page HTML et son style est défini :
Exemple
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Un titre</h1>
<myHero>Mon élément Héros</myHero>
</body>
</html>
Essayez‑le vous‑même »
La déclaration JavaScript document.createElement("myHero") est nécessaire pour créer un nouvel élément dans IE9 et les versions antérieures.
Problème avec Internet Explorer 8
Vous pouvez utiliser la solution décrite ci‑dessus pour tous les nouveaux éléments HTML5.
Cependant, IE8 (et les versions antérieures) n’autorisent pas la mise en forme des éléments qu’ils ne reconnaissent pas !
Mais heureusement, Sjoerd Visscher a créé HTML5Shiv ! HTML5Shiv est une solution JavaScript qui permet d’activer la mise en forme des éléments HTML5 dans les versions d’Internet Explorer antérieures à la version 9.
Vous aurez besoin de HTML5shiv pour assurer la compatibilité avec les navigateurs IE plus anciens que IE9.
Syntaxe pour HTML5Shiv
HTML5Shiv est généralement placé à l’intérieur de la balise <head>.
HTML5Shiv est un fichier JavaScript référencé par une balise <script>.
Vous pouvez utiliser HTML5Shiv lorsque vous utilisez de nouveaux éléments HTML5 tels que <article>, <section>, <aside>, <nav>, <footer>.
Vous pouvez télécharger la dernière version de HTML5Shiv sur GitHub ou lier la version CDN https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js, (ou alternativement une version plus récente sur notre site : html5shiv.js)
Syntaxe
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
Exemple HTML5Shiv
Si vous ne souhaitez pas télécharger et stocker le script HTML5Shiv sur votre propre site, vous pouvez référencer la version fournie sur un CDN.
Le script HTML5Shiv est généralement placé à l’intérieur de l’élément <head>, après les feuilles de style :
Exemple
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<section>
<h1>Villes célèbres</h1>
<article>
<h2>Londres</h2>
<p>Londres est la capitale de l’Angleterre. C’est la ville la plus peuplée du Royaume‑Uni, avec une aire métropolitaine de plus de 13 millions d’habitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris est la capitale et la ville la plus peuplée de France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo est la capitale du Japon, le centre de la région du Grand Tokyo, et la plus grande aire métropolitaine du monde.</p>
</article>
</section>
</body>
</html>
Essayez‑le vous‑même »
Note de l’administrateur W3SchoolsFR. Le meilleur. En réalité, il est préférable de placer la référence au script HTML5Shiv tout à la fin de la page web, juste avant la balise </body> (afin d’accélérer le chargement de la page).
