Blog
Javascript compatible pre IE9

Partager

Bien que certains géants du web aient annoncés l’arrêt du support IE8, il est encore souvent nécessaire d’effectuer cette compatibilité pour le compte de certains clients. Cet article ne se veut pas exhaustif mais couvre les quelques cas bloquants que j’ai pu rencontrer et les solutions trouvées pour y remédier.

Tester sur Internet Explorer

Bien que les versions actuelles d’IE disposent d’un émulateur pour tester les anciennes versions, cet outil n’est pas fiable à 100%. À ma connaissance, il n’existe pas non plus de stand-alone des versions précédentes d’IE.

La solution proposée par Microsoft est de télécharger une VM avec le système d'exploitation et la version d'Internet Explorer de votre choix. Cette solution est lourde (télécharger une VM de 5Go juste pour tester sur IE8…) mais je ne vois pas d’autres alternatives.

Si par manque de temps, vous ne pouvez pas proposer une version de votre site fonctionnelle avec IE8 ou que vous voulez inviter vos utilisateurs à mettre à jour leurs navigateurs, vous pouvez toujours utiliser les commentaires conditionnels :

<!--[if lte IE 8]>
   <div style="clear: both; height: 112px; padding:0; position: relative;">Vous utilisez une version dépréciée d'Internet Explorer, merci de le mettre à jour ou de télécharger un vrai navigateur.</div>
<![endif]-->

HTML5 Shiv

Il existe mille et une raisons pour lesquelles vous désirez utiliser les éléments html5. Malheureusement les anciennes versions d'Internet Explorer ne gèrent du tout le html5. Un des principaux problèmes est qu’IE refuse d’appliquer les styles sur les éléments qu’il ne connait pas.

Pour contourner ce problème, il est nécessaire de créer ces balises via la fonction JavaScript :

createElement
Cela permet au moteur css de savoir que ces éléments existent. Les personnes ayant découvert ce hack ont mis à disposition sur github le code nécessaire pour styliser tous les éléments HTML5.

Attention : si vous êtes un développeur AngularJS, il est probable que vous soyez amenez à développer vos propres directives (morceaux de code HTML réutilisables se présentant sous la forme d’attributs, tags ou classes). Dans ce cas vous devrez vous-même ‘déclarer’ vos éléments via la méthode :

document.createElement('myCustomTag');

Les fonctions non disponibles sur prototype

Il manque un bon nombre de méthodes sur l’objet prototype de Object et Array. Exemple de code non fonctionnel sur IE <9 (indexOf n'est pas défini) :

var arrayTest = new Array('foo', 'bar');
arrayTest.indexOf('bar');

Il est donc nécessaire de recourir à un polyfill pour assurer la compatibilité avec les anciennes versions d'IE. Pour avoir la liste complète des méthodes manquantes, vous pouvez consulter la table de compatibilité pour EMAScript 5 Personnellement, j’aime utiliser les versions proposées par la fondation Mozilla (et utilisées dans leurs projets). Exemple pour indexOf :

if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function (searchElement , fromIndex) {
    var i,
        pivot = (fromIndex) ? fromIndex : 0,
        length;

    if (!this) {
      throw new TypeError();
    }

    length = this.length;

    if (length === 0 || pivot >= length) {
      return -1;
    }

    if (pivot < 0) {
      pivot = length - Math.abs(pivot);
    }

    for (i = pivot; i < length; i++) {
      if (this[i] === searchElement) {
        return i;
      }
    }
    return -1;
  };
}

Il est également possible de trouver des wrappers complets si vous ne souhaitez pas ajouter manuellement ces méthodes une par une.

Utilisation des mots réservés

Il arrive qu’un objet possède des mots réservés du langage JavaScript en tant que propriété ou méthode :

var objectTest = {default : 'defaultValue' , delete :  function(){ /*do something*/} }
objectTest.default;  //should print 'defaultValue'
objectTest.delete(); //should execute the delete function

Pour rendre votre code compatible, vous devez utiliser des quotes avec les mots réservés et une syntaxe avec des crochets pour accéder à ses propriétés :

var objectTest = {'default' : 'defaultValue' , 'delete' :  function(){ //do something} }
objectTest['default'];  //should print 'defaultValue'
objectTest['delete'] (); //should execute the delete function

Il est préférable de toujours quoter les propriétés dans un objet en JavaScript. Si votre code venait à être minifié, le ‘compilateur’ ne renommerait pas les symboles et les propriétés seraient ainsi accessibles par d’autres fichiers sources (c’est notamment ce que font toutes les librairies js).

La liste des différents mots clés réservés peut être consultée ici.

document.head

Il n’est pas possible d’accéder directement à l’élément 'head' d’un document via document.head . Il faut passer par :

document.getElementsByTagName('head')[0]

N’hésitez pas à partager vos hacks et work-arounds pour rendre votre JavaScript compatible avec les anciennes versions d’IE.

comments powered by Disqus