Support des navigateurs HTML5

Vous pouvez aider les navigateurs anciens à traiter HTML5.

Support des navigateurs HTML5

All modern browsers support HTML5.

In addition, all browsers, regardless of newness, will automatically treat unrecognized elements as inline elements.

For this reason, you can help older browsers handle "unknown" HTML elements.

Note:You can even teach Stone Age IE6 how to handle unknown HTML elements.

Define HTML5 elements as block-level elements

HTML5 defines eight newsemantic HTML elements. All areblock-levelelements.

You can use CSS display property set to block, to ensure correct behavior in older browsers:

Exemple

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

Adding new elements to HTML

You can add any new element to HTML using browser tricks:

This example adds an HTML element named <myHero> new elements, and define the display style for them:

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-le vous-même

Added JavaScript statements document.createElement("myHero"), but only for IE.

Internet Explorer issues

This solution can be used for all new HTML5 elements, but:

Note:Internet Explorer 8 and earlier versions do not allow styles to be added to unknown elements.

Fortunately, Sjoerd Visscher created "HTML5 Enabling JavaScript", "the shiv":

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

The above code is a comment, but early versions of IE9 will read it (and understand it).

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>Mon Premier Article</h1>
<article>
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.
</article>
</body>
</html>

Essayez-le vous-même

Le lien vers le code shiv doit être placé dans l'élément <head>, car Internet Explorer doit connaître tous les nouveaux éléments avant de les lire.

HTML5 Squelette

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Squelette</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</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 Semantique</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Géolocalisation</a></li>
  <li><a href="html5_canvas.asp">Graphiques HTML5</a></li>
</ul>
</nav>
<section>
<h1>Villes célèbres</h1>
<article>
<h2>London</h2>
<p>London est la capitale de l'Angleterre. C'est la plus grande ville du Royaume-Uni,</p>
<p>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 plus grande ville de France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo est la capitale du Japon, le centre de la région métropolitaine de Tokyo.</p>
et la plus grande agglomération urbaine du monde.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Tous droits réservés.</p>
</footer>
</body>
</html>

Essayez-le vous-même