Archives

Rendre les balises HTML5 fonctionnelles sur IE6 à IE8

Le HTML5 devient de plus en plus populaire, mais Internet Explorer 8 ainsi que ses versions antérieures ne supportent pas totalement le HTML5. Il est toutefois possible d’activer les éléments du html5 en insérant un script dans sa page web.

Mise à jour 2019 : IE8, IE9 et TE10 ont été remplacés par IE11 et Microsoft Edge, qui proposent une meilleure compatibilité avec le HTML5. Attention toutefois à désactiver le mode de compatibilité dans votre nouveau navigateur en cas de problème. Si toutefois, vous avez toujours la problématique par rapport à IE 8, vous trouverez votre solution dans cet article.

Quelle est la problématique d’IE8?

Les navigateurs IE8 ainsi que ses versions antérieures ne supportent pas les fonctionnalités du HMTL5, y compris les nouvelles balises. La nouvelle version IE9 rattrape un peu ce retard.

Mais comme on peut le voir sur le camembert ci-dessous (cliquez pour agrandir), sur la période d’Octobre 2011 à Février 2012, IE9 ne représente que 30% des usages. Les statistiques sont consultables ici: « Internet Explorer Usage / Market Share » .

Répartition de l'usage d'Internet Explorer
Répartition de l’usage d’Internet Explorer

Comment utiliser le HTML5 sur Internet Explorer 8?

Pour que IE8 reconnaisse les nouvelles balises, il faut ajouter du code Javascript pour créer les éléments ou balises comme ceci « document.createElement(‘header’); » et ajouter une ligne pour chaque balise :article, section, nav, footer, …

A LIRE AUSSI :  Comment consulter vos photos Instagram sur le Web ?

Pour simplifier ce processus, Remy Sharp a créé un fichier Javascript hébergé sur Google Code qui créé toutes ces balises.

Pour l’utiliser, il faut copier les lignes ci-dessous dans l’entête de vos pages (dans le contenu de la balise <head>) et le script Javascript sera chargé sur votre site internet si le visiteur utilise un navigateur Internet Explorer antérieur à la version 9.

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

Le script pouvant évoluer, en cas de dysfonctionnement, vous pouvez consulter la page Google Code à ce lien: « Google Code html5shiv »

Petite démonstration:

J’ai essayé le script sur ma page perso « http://aabaglo.me » . Vous pouvez voir les résultats sur l’image ci-dessous:

Test du script html5shiv sur http://aabaglo.me
Test du script html5shiv sur http://aabaglo.me

N’hésitez donc pas à aller faire un tour sur le page Google Code si le script semble ne plus fonctionner et laissez-moi un petit mot si vous découvrez une mise à jour ou une autre astuce.

Mise à jour du 02/10/2013:

Il est à présent possible de télécharger le script et de l’inclure directement entre les balises <head>. Cela peut être utile pour travailler sur un serveur local en mode hors connexion.

Le fichier zip contient le script Javascript ainsi que plusieurs fichiers html pour le tester .

=> Télécharger html5shiv

(Source: Turn On HTML5 In IE8 or Lower)

 

Amah

Passionné de nouvelles technologies, je partage ici des innovations technologiques qui impactent notre quotidien, ainsi que des astuces & outils pour simplifier notre vie à l'ère du numérique. Tech addict & casual dev | Interested by Technology, Energy & Africa

Articles similaires

14 commentaires

  1. Bonjour,
    Merci beaucoup pour cette info essentielle dans un contexte B to B où les configs de navigateurs sont parfois très anciennes (IE7 chez un de mes clients grand compte…)
    je fais circuler 🙂
    Bonne journée
    Olivier

    1. Bonjour Olivier et merci à vous. J’ai ajouté une mise à jour sur la possibilité d’intégré le script via un fichier js.
      Bonne journée à vous également.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

 

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Bouton retour en haut de la page