Comment faire fonctionner le HTML5 dans IE et Firefox

Même si HTML 5 est une technologie récente et fantastique, certains navigateurs ne supportent pas nativement les nouveaux éléments sémantiques. Pour le moment, oublions les fonctionnalités vraiment séduisantes comme le contrôle complet de l’élément <video>, et concentrons-nous seulement sur le rendu des éléments.

Les navigateurs de premier rang (A-grade) [en], comprenant IE 8 et les versions antérieures, Firefox 2 et Camino 1 (ces deux derniers navigateurs utilisent le moteur de rendu Gecko, ce qui explique pourquoi ils sont touts les deux affectés).

Débutons avec Internet Explorer.

IE ne reconnaît pas les éléments HTML 5

IE ne voit ni les éléments HTML 5 ni les styles.

En fait, c’est la même situation que nous avions avant HTML 5, lorsque l’élément <abbr> ne pouvait pas être stylé dans IE 6, ouvrant la porte vers toutes sortes [en] de solutions de contournement [en]. (Pendant que nous y sommes, nous allons aussi régler le problème de l’élément <abbr> en apprenant à IE à reconnaître les éléments HTML 5).

La solution

Il y a de l’espoir! La solution, découverte par Sjoerd Visscher [en] est de tout simplement créer le nouvel élément en utilisant du JavaScript et voilà [en français dans le texte], IE est capable de le styler :

document.createElement('header');

John Resig a aussi écrit sur cette particularité du HTML [en].

Par exemple, vous souhaitez rendre l’élément <time> en italiques :

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

Cette capture d’écran montre le rendu dans IE avant d’appliquer la solution :

IE sans la solution HTML 5

On applique la solution en ajoutant la ligne de code indiquée :

<!DOCTYPE html>
<html>
<head>
  <title>Header test</title>
  <style>
  time { font-style: italic; }
  </style>

  <!-- Ajouter cette ligne -->
  <script>document.createElement('time');</script>
</head>
<body>
  <time datetime="2009-09-13">my birthday</time>
</body>
</html>

Et après avoir appliqué cette solution, le style est correct dans IE:

IE avec une solution HTML 5

Un coup, une solution

Pour simplifier la vie de tout le monde, j’ai écrit un fichier JavaScript qui peut être inclus pour créer tous les éléments de HTML 5 (et l’élément <abbr>) pour IE.

Télécharger le script pour activer HTML 5 dans IE

Ajoutez le script dans votre balise <head> et vous serez en mesure de styler correctement les éléments dans IE:

<!--[if lte IE 8]>
<script src="html5.js" type="text/javascript"></script>
<![endif]-->

J’ai utilisé une condition pour que la solution ne s’applique qu’à IE 8 et aux versions antérieures. J’espère que les éléments HTML 5 seront supportés dans IE 9 et les versions subséquentes, lorsque ce jour arrivera, vous devrez quand même vous assurer de valider la condition!

Conditions & pièges

Soyez conscient des détails suivants lors de l’utilisation de cette solution HTML5.

JavaScript requis

Évidemment, cette solution signifie que votre mise en page dépend du Javascript. Personnellement, je constate que si vous avez utilisé un balisage sémantique sur votre site et que les éléments ne peuvent être stylés, le contenu est encore complètement lisible.

Voici une capture d’écran du site Full Frontal [en] balisé avec des éléments HTML 5, et rendu dans IE sans Javascript:

IE avec est sans Javascript pour régler HTML 5

Vous voyez dans la seconde capture que le contenu n’est pas parfait, mais qu’il est toujours lisible. La cascade se fait correctement, un peu comme si le CSS était désactivé.

C’est toujours bon d’utiliser sa tête

Si vous créez le nouvel élément et n’utilisez pas une balise <body> tag (ce qui est tout à fait valide en HTML 5), IE va insérer les éléments créés dans une balise <head>. Un peu étrange, mais vous pouvez aisément éviter ce problème en utilisant les balises <head> et <body> dans votre code. Leif Halvard explique plus avec quelques démonstrations [en].

Un bogue de rendu avec Firefox 2 et Camino 1

Il y a un bogue dans l’engin de rendu Gecko (précisément les versions avant 1.9b5) qui affecte Firefox 2 et Camino:

Firefox 2 (et tout autre navigateur basé sur Gecko avec une version antérieure à 1.9b5) ont un problème lors de l’affichage (parsing). Tout élément inconnu sera fermé lorsqu’il rencontrera le début d’un élément de type « bloc » : p, h1, div et ainsi de suite.

Selon les statistiques de W3 Schools [en], Firefox 2 possède environ 3% du marché – peut-être est-ce si peu qu’on peut l’ignorer. Il est raisonnable de supposer que Camino 1 a encore une part de marché plus petite.

Toutefois, si on ignore ce problème, un site peut être « cassé » dans ces navigateurs. Comment peut-on régler ce problème?

Le problème fait surface lorsque Gecko ne reconnaît pas un élément. En gros, Gecko lit un élément et ne le reconnaît pas, il enlève le contenu de l’élément et l’affiche à côté de ce dernier.

Pour l’exemple, considérez le code suivant :

<body>
  <header><h1>Titre</h1></header>
  <article><p>...</p></article>
</body>

Gecko (version antérieure à 1.9b5) l’interprétera comme si le balisage était comme suit :

<body>
  <header></header>
  <h1>Titre</h1>
  <article></article>
  <p>...</p>
</body>

Le résultat visuel est similaire à celui de la capture d’écran de IE sans JavaScript (avec quelques différences subtiles puisque l’arbre du DOM et en fait dans un ordre différent auquel vous et l’auteur vous attendez).

La solution

Il y a deux approches pour régler ce problème, et, jusqu’à présent, je n’en ai utilisé avec succès que l’approche sans JavaScript.

La solution JavaScript

La première méthode est d’utiliser JavaScript pour traverser le DOM et de réarranger les éléments au fur et à mesure qu’un problème surgit. Simon Pieters a un petit exemple fonctionnel [en] sur la méthode à suivre (vers le bas de la page). Toutefois, personnellement je n’ai jamais réussi à le faire fonctionner dans mon code. Il n’y a aucun doute que ce problème puisse être réglé avec du JavaScript, mais cette solution doit être peaufinée pour gérer toutes les permutations de balisage.

La solution XHTML

La seconde approche est de servir du XHTML à Gecko. Cette méthode m’a semblé plus simple lorsqu’on génère une page dynamiquement (avec du PHP par exemple) où vous pouvez aussi créer votre propre fichier .htaccess pour utiliser le mod_rewrite d’Apache.

Le premier changement à faire dans votre balisage est d’ajouter l’attribut xmlns à votre balise <html>:

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

Ensuite, nous devons aller chercher la chaîne indiquant le navigateur (typiquement, cette approche n’est pas bonne, mais elle est justifiée lorsqu’on cherche à viser un groupe d’usagers spécifique). Si la version de Gecko est antérieure à 1.9, la valeur de l’en-tête Content-type doit être application/xhtml+xml.

Si vous souhaitez utiliser mod_rewrite dans un fichier .htaccess (ou dans le fichier httpd.conf), vous devez suivre les règles suivantes :

RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

Cette règle envoie le bon en-tête Content-type à tout les navigateurs basés sur Gecko ayant une version antérieure à 1.9 ou « rv:1.9pre » ou « rv:1.9a » ou « rv:1.9bx » quand x est inférieur 5.

Si vous ne voulez pas utiliser l’approche mod_rewrite, vous devez envoyer les en-têtes manuellement dans vos scripts de serveurs. Voici une solution PHP :

if (preg_match('/rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) {
  header('Content-type: application/xhtml+xml');
}

Cet extrait de code doit être inséré avant l’impression de n’importe quel contenu par votre script — c’est à dire dès que possible.

Piège: L’écran jaune de la mort (Yellow Screen of Death)

L’écran jaune de la mort surgit dès qu’il y a une erreur XML sur la page. Lorsque vous servez votre contenu comme du XML et demandez au navigateur de l’interpréter strictement comme du XML, le navigateur ne peut servir de caractère qu’il ne reconnaît pas, sinon il devient fou:

L'écran jaune de la mort

Ci-dessous, quelques exemples pour éviter les erreurs d’interprétation XML.

Soyez strictes dans votre balisage

Vous devez vous assurer que votre balisage est impeccable — facille, puisque vous êtes déjà un Jedi du balisage, n’est-ce pas?

Servez-vous des entités XML

Il faut éviter à tout prix les entités HTML. Désolé, mais &bull; ne fonctionnera plus. Il faut utiliser les entités XML, c’est-à-dire la représentation numérique des caractères.

J’ai développé un outil pour chercher les entités [en] qui affiche l’entité HTML et la valeur XMLde cette entité. Par exemple, la valeur de &bull; est 8226, donc l’entité XML est .

Nettoyez le contenu généré par les usagers

S’il y a du contenu généré par les usagers sur votre site (par exemple, des commentaires sur un blogue), vous devez nettoyer le contenu généré par les usagers pour vous assurer qu’aucun problème de validation ne lance l’écran jaune de la mort.

Ce problème justifie l’utilisation de la solution JavaScript à lui seul.

Est-ce que ça vaut la peine?

Ceci dit, Firefox a un excellent programme de mise à jour. En regardant les statistiques sur le site de W3Schools [en], on peut présumer que le nombre d’usagers de Gecko diminue rapidement.

Pour en savoir plus :

Partagez :
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay


Un commentaire pour “ Comment faire fonctionner le HTML5 dans IE et Firefox ”

Commentaire par squirrel le

Bonjour,

Pourquoi le code html5.js doit toujours être avant les autres script js dans le head ?

exemple mauvais

<code>
alerte(‘time’);
document.createElement(‘time’);
</code>

exemple correcte

<code>
document.createElement(‘time’);
alerte(‘time’);
</code>

squirrel :)

Laisser un commentaire

Vous pouvez utiliser ce balises : <a href="" title=""> <abbr title=""> <b> <blockquote cite=""> <cite> <del datetime=""> <em> <i> <q cite=""> <strong>

Vous pouvez aussi utiliser <code>, mais n'oubliez pas d'utiliser &lt; and &gt; pour les balises.