Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards

IE7.js : ce n’est pas de la magie, c’est de la technologie !

Après cette longue introduction, voyons ce que peut nous apporter la bibliothèque IE7.js pour assurer à nos pages web un rendu cohérent entre les navigateurs présents sur le marché et une meilleure prise en charge du dernier cri en matière de sélecteurs ou de propriétés CSS, ou encore pour corriger quelques bugs HTML.

Avec le script E7.js de Dean Edwards, il est presque possible de concilier les trois approches au prix de seulement – tenez vous bien – 31 KB ! Oui, vous avez bien lu : il est possible de faire en sorte que IE5 et IE6 fonctionnent comme IE7. Voire même de donner à IE7 les bonnes vibrations des standards web pour le faire fonctionner comme devrait le faire idéalement IE8 pour à peine 37 KB, soit moins que le poids d’une image de Laure Manaudou habillée !..

Petite digression…

(A propos de poids, j’ai lu dans un fil de discussion sur le forum Alsacréations que c’était un poids important. Si l’on considère que le script est chargé uniquement par les navigateurs ciblés dans le commentaire conditionnel (soit au minimum IE5/6 si l’on installe IE7.js) pour un rapport avantages/inconvénients en terme de fonctionnalités con-si-dé-ra-ble, ces 31 KB, me semblent tout à fait acceptables.

Il est peut-être temps maintenant de considérer l’utilisation de Javascript comme une pratique légitime, y compris — et j’allais dire surtout — pour palier les insuffisances d’Internet Explorer en matière de respect des standards !)

…Revenons à nos moutons

Cette parenthèse étant fermée, revenons au script. Son utilisation est très simple : après avoir téléchargé le script, il suffit de le lier à la page web en utilisant un commentaire conditionnel en fonction de vos besoins. Comme je l’ai évoqué plus haut, ce script est composé des fichiers IE7.js et IE8.js. Le premier permet à IE5 et IE6 de se comporter comme IE7, ce qui est déjà très intéressant, et IE8.js ouvre à IE7 la porte des standards avec des fonctionnalités CSS avancées.

Le module IE7.js

Rend IE5/6 compatible avec IE7 et s’utilise comme suit :

<!--[if lt IE 7]>
<script src="/IE7.js" type="text/javascript"></script>
<![endif]-->

Parmi les améliorations apportées par IE7.js, nous trouvons la prise en charge :

Des sélecteurs CSS
Des propriétés CSS

Le script corrige également quelques bugs concernant :

Des balises HTML
D’autres bugs de rendu

* Ces patchs ne sont pas disponibles dans la bibliothèque standard IE7 mais ils sont présent dans le module séparé ie7-squish.js.

Le module IE8.js

Donne à IE5-7 les fonctionnalités CSS avancées qui manquent à IE7 et s’utilise ainsi :

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

Notez qu’il n’est pas nécessaire d’inclure le module IE7.js lorsqu’on utilise IE8.js. Les améliorations apportées par IE8.js sont nombreuses et concernent la prise en charge :

Des sélecteurs CSS
Des propriétés CSS
Des bugs gênant restant dans IE7

Le format d’image PNG

Le script corrige la transparence des PNG pour les images dont le nom se termine par -trans.png. On notera cependant qu’une image de fond transparente ne peut pas être répétée avec background-repeat ni être positionnée avec background-position.

Ressources

Voici la page qui répertorie les améliorations apportées par IE7.js avec un exemple pour chacune.

Le groupe Google pour suivre l’évolution du script et la résolution des bugs ou simplement avoir des retours concret d’utilisateurs.

Ils en parlent (un peu)

Les ressources didactiques au sujet de ce script sont curieusement peu nombreuses si l’on excepte les simples effets d’annonce. Voici quelques liens sur le sujet :

Si de votre côté vous avez d’autres sources, n’hésitez pas à vous manifester 😉

Quelques mots sur Dean Edwards

Dean Edwards n’est pas un débutant en javascript. C’est également l’auteur de base2, une bibliothèque qui supprime toutes les petites différences dans l’implémentation de Javascript sur le marché et de packer qui sert à compresser le code Javascript, dont on peut voir l’efficacité sur le code de jQuery.

Conclusion

Je n’irais pas jusqu’à dire que le script IE7.js est une alternative au test des pages dans IE6, mais c’est peut-être pour bientôt ! En tout cas, même si l’on n’envisage pas d’utiliser la bibliothèque IE7.js en production (version bêta), elle présente un intérêt didactique certain en donnant clairement la liste des propriétés CSS délaissées par IE6 ou IE5.

Pour ma part, je compte l’utiliser dès maintenant en faisant attention à ne pas me reposer entièrement dessus pour les éléments cruciaux de la mise en page. Mais il faut avouer que la perspective de pouvoir utiliser la transparence du format PNG ou la pseudo-classe :hover sur autre chose qu’un lien est déjà très tentante. Sans parler de la possibilité de pousser les sélecteurs de 3ème génération dans leurs retranchements 😉