Prise en charge du navigateur HTML5



Vous pouvez faire en sorte que certains navigateurs plus anciens (qui ne prennent pas en charge HTML5) prennent en charge HTML5.


Prise en charge du navigateur HTML5

Les navigateurs modernes prennent en charge HTML5.

De plus, tous les navigateurs, anciens et nouveaux, traiteront automatiquement les éléments non reconnus comme des éléments en ligne.

De ce fait, vous pouvez "apprendre" le navigateur à gérer les éléments HTML "inconnus".


Note甚至你可以教会 IE6  (Windows XP 2001) 浏览器处理未知的 HTML 元素。

Définit les éléments HTML5 en tant qu'éléments de bloc

HTML5 définit 8 nouveaux éléments HTML Sémantiques. Tous ces éléments sont des éléments de niveau bloc .

Afin de permettre aux anciens navigateurs d'afficher correctement ces éléments, vous pouvez définir la valeur de l'attribut CSS display sur block :

Exemple

en-tête, section, pied de page, côté, navigation, principal, article, figure {
display: block;
>


Ajouter de nouveaux éléments au HTML

Vous pouvez ajouter de nouveaux éléments au HTML.

Cette instance ajoute un nouvel élément au HTML et définit un style pour l'élément. L'élément est nommé

<myHero> :

Instance

.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<meta charset="utf-8">
<title>为 HTML 添加新元素</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
	display: block;
	background-color: #ddd;
	padding: 50px;
	font-size: 30px;
} 
</style> 
</head>

<body>

	<h1>我的第一个标题</h1>

	<p>我的第一个段落。</p>

	<myHero>我的第一个新元素</myHero>

</body>
</html>

Exécuter l'instance»Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne

Déclaration JavaScript

document. createElement(" myHero") consiste à ajouter de nouveaux éléments au navigateur IE.


Problèmes du navigateur Internet Explorer

Vous pouvez utiliser la méthode ci-dessus pour ajouter des éléments HTML5 pour le navigateur IE, mais :


Nous pouvons utiliser "HTML5 Enabling JavaScript", " shiv" créé par Sjoerd Visscher pour résoudre ce problème :

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

Le code ci-dessus est un commentaire, qui est utilisé pour lire le fichier html5.js et l'analyser lorsque la version du navigateur IE est inférieure à IE9.

Remarque : Les utilisateurs nationaux doivent utiliser la bibliothèque de ressources statiques Baidu (la bibliothèque de ressources Google est instable en Chine) :

<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif ]-->

html5shiv est une meilleure solution pour le navigateur IE. html5shiv résout principalement le problème selon lequel les nouveaux éléments proposés par HTML5 ne sont pas reconnus par IE6-8. Ces nouveaux éléments ne peuvent pas être utilisés comme nœuds parents pour envelopper des éléments enfants et les styles CSS ne peuvent pas être appliqués.


Solution Shiv parfaite

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>

<body>

	<h1>我的第一篇文章</h1>

	<article>
	php中文网 ——  php中文网!!
	</article>

</body>
</html>

Exécuter l'instance»

Cliquez sur « Exécuter Exemple" pour afficher l'exemple en ligne. Le code de référence

html5shiv.js doit être placé dans l'élément <head>, car le navigateur IE doit d'abord charger le fichier lors de l'analyse de nouveaux éléments HTML5.