Rendre les balises HTML5 fonctionnelles sur IE6 à IE8

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.

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, …

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)

 

Vous avez trouvé cet article utile? Partagez le !

14 Comments

  1. Adobe BrowserLab: Testez le rendu d'une page web sur différents navigateurs - Geek mais pas que ...
    Adobe BrowserLab: Testez le rendu d'une page web sur différents navigateurs - Geek mais pas que ...08-06-2012

    […] dans les fonctionnalités trop complexes, cet outil s’est avéré fort utile pour tester un script permettant de rendre compatible sa page web en HTML5 avec IE8. J’ai ainsi pu avoir le rendu de ma page perso avec et sans le script. Test du script […]

  2. Ultimate CSS Gradient Generator: Généner des dégradés en CSS - Geek mais pas que ...
    Ultimate CSS Gradient Generator: Généner des dégradés en CSS - Geek mais pas que ...08-11-2012

    […] l’avènement du HTML5, le fond a été de plus en plus dissocié de la forme et les fonctionnalités des feuilles de […]

  3. Créer des animations html5
    Créer des animations html510-16-2012

    […] sûr et stable. Toutefois, l’HTML5 reste une nouveauté et n’est pas supporté par tous les navigateurs. Cette situation devrait petit à petit évoluer.  Selon de nombreuses études, les amateurs de […]

  4. A5 HTML5 Animator: créer des animations pour vos sites web - Geek mais pas que ...
    A5 HTML5 Animator: créer des animations pour vos sites web - Geek mais pas que ...11-19-2012

    […] du bouton « play » juste au dessus de la timeline ou directement dans un navigateur en sélectionnant « Preview » dans la barre de menus. Toutes les […]

  5. olivier
    olivier10-02-2013

    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

    • Amah
      Amah10-02-2013

      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.

  6. Rendre les balises HTML5 fonctionnelles sur IE6...
    Rendre les balises HTML5 fonctionnelles sur IE6...09-25-2014

    […] Utiliser ou rendre compatible le HTML5 sur Internet Explorer 8 et les versions antérieures (IE 5, IE6, et IE7)  […]

  7. Carvalho
    Carvalho10-31-2014

    Le lien du script est faux ! Il manque le « http: »

    • Amah
      Amah11-04-2014

      Bonjour, avez-vous essayé? Normalement, ça marche comme cela d’après mes tests. Si cela ne marche pas, merci de m’en informer.

  8. Manuel
    Manuel04-29-2016

    excellent article

    • Amah
      Amah05-20-2016

      Merci pour votre retour sur l’article.

  9. Barnabé
    Barnabé04-29-2016

    Moi, j’ai appris à manipuler HTML 5 en me servant de quelques vidéos sur http://www.alphorm.com/tutoriel/formation-en-ligne-html5-css-3-et-javascript-70-480 et je dois dire que votre article m’intéresse beaucoup car je ne l’ai pas encore. Merci pour ce partage.

    • Amah
      Amah05-20-2016

      Merci de votre intérêt pour cet article. J’espère qu’il vous a été utile.

  10. PARADES pour IE | Pearltrees
    PARADES pour IE | Pearltrees09-21-2016

    […] Rendre les balises HTML5 fonctionnelles sur IE6 à IE8 – Geek mais pas que. […]

Leave a Reply

Petit défi pour filtrer les messages automatiques : * Time limit is exhausted. Please reload CAPTCHA.