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
- parent > child
- adjacent + sibling
- adjacent ~ sibling
- .multiple.classes
- :hover
- :first-child
- [attr]
- [attr= »value »]
- [attr~= »value »]
- [attr|= »value »]
- [attr^= »value »]
- [attr$= »value »]
- [attr*= »value »]
Des propriétés CSS
- background-attachment
- background-image
- bottom
- cursor
- display
- font-size
- margin
- max-height
- max-width
- min-height
- min-width
- overflow
- position
- right
Le script corrige également quelques bugs concernant :
Des balises HTML
D’autres bugs de rendu
- Doubled Margin * cf. www.positioniseverything.net/explorer/doubled-margin.html
- Peekaboo * cf. www.positioniseverything.net/explorer/peekaboo.html
- Unscrollable Content * cf. www.positioniseverything.net/explorer/unscrollable.html
* 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
- ::after
- ::before
- :active
- :focus
- :checked
- :contains()
- :disabled
- :empty
- :enabled
- :indeterminate
- :lang()
- :last-child
- :not()
- :nth-child()
- :nth-last-child()
- :only-child
- :target
Des propriétés CSS
Des bugs gênant restant dans IE7
- button[type=submit]
- form voir aussi attr() et url().
- object
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 😉
Ah oui en effet c’est plutôt plaisant cette histoire 🙂
Je l’utiliserai certainement également.
De ce que tu dis je suis plutôt visionnaire (j’ai envie de développer uniquement du conforme et d’envoyer chier le reste :p) mais en effet ce n’est pas toujours possible une fois hors projet perso, donc je fais au mieux avec IE6 mais c’est parfois assez lourd, notamment comme tu le mentionne sur les hover et la transparence PNG.
Bref j’aime bien IE7.js, pour le IE8 par contre j’attendrai encore un peu ‘déjà règler quelques soucis IE6 sera pas mal).
En tant que développeur front, je suis plutôt réservé quant à l’usage de ce genre de bibliothèque javascript.
A cela une raison toute simple : que font les utilisateurs ne disposant pas de javascript ou d’un support partiel ? Je pense notamment aux utilisateurs naviguant avec un navigateur texte, un navigateur ancien ou encore un lecteur d’écran. Ils se retrouvent face à un site qui ne tient plus debout, car reposant sur des correctifs d’une technologie qu’ils ne possèdent pas. Cela peut donc fortement nuire à l’accès à l’information contenu sur le site.
En un mot : contre. Mais cela n’engage que moi 😉
Sébastien si je peux me permettre et bien que je sois en partie d’accord avec toi je pense que l’accessibilité est plus une question de développement que de technologie.
Un site développé avec ces technos peut tout à faire « tenir debout » si des alternatives ont été prévues (javascript non intrusif, « dégradation gracieuse »…)
Perso, j’ai décidé de ne pas l’utiliser parce que ça me semble difficile de respecter ces règles avec cette librairie (bien que je rêve de pouvoir utiliser les sélecteurs CSS dans mes dev de tous les jours 😉 )
#Arkan {
Beaucoup utilise des hacks ou des scripts pour gérer la transparence du PNG et la plupart du temps, les sélecteurs qui manquent à IE6 sont simulés par du javascript maison ou par jQuery (c’est ce que j’utilise en général), ce qui peut nuire à l’accessibilité, alors que là, on garde la maitrise puisque tout ce passe dans la feuille de style CSS.
}
#Sébastien,
#Rhaze {
L’accessibilité ne risque absolument rien avec cette bibliothèque car je rappelle qu’il s’agit juste d’avoir la possibilité d’utiliser des sélecteurs et autre pseudo-classes mis à notre disposition par le W3C (comme si on codait pour les navigateurs standards) et de faire en sorte que ces sélecteurs soit compris par IE5/6 ou IE7 via un commentaire conditionnel.
Les navigateurs texte, oraux, anciens, etc. réagiront comme il le font d’habitude en ignorant ce qu’il ne peuvent pas comprendre.
Je crois qu’il y a beaucoup de travail pédagogique à refaire après ces dernières années où Javascript n’avait pas bonne presse 😉
}
Merci pour cet article très intéressant.
Je me pose juste une question :
Est ce qu’il peut y avoir des interférences entre cette librairie IE7.js et nos CSS Reset ?
#pixenjoy { à priori non, et pour m’en assurer j’ai mis IE8.js en place sur ce blog (qui utilise le reset CSS « Resetting » d’Eric Meyer et je note rien de spécial.
Concernant l’utisation du script, il ne semble pas fonctionner avec les feuilles de style externes, ce qui peut-être gênant.
Pour le moment je coupe la poire en deux en faisant un incluse php vers un fichier du genre « styles-avances.css.php » pour éviter de gérer des styles dans le head.
}
Sébastien >
Internet Explorer 6 est un vieux navigateur ( presque 7 ans ! ), complètement dépassé aujourd’hui. Malheureusement, les pages sont toujours conçues dans le souci d’une compatibilité avec IE6, et tous les navigateurs en sont pénalisés. Les sélecteurs CSS, pour ne prendre qu’un exemple, sont complètement sous-exploités.
Dans ce contexte, IE7.js me semble un compromis largement acceptable pour accompagner la fin de carrière de ce navigateur : ce « patch » permet à IE6, sous réserve que Javascript soit activé, d’afficher correctement des pages, utilisant pleinement les sélecteurs CSS 2.1 (datant de 2001), parfaitement valides et correctement interprétés par les autres navigateurs du marché.
Il faut juste s’assurer que la page reste visible et utilisable dans IE6 sans Javascript (on ne choisit pas toujours son navigateur). Voici une expérience intéressante, dans laquelle l’utilisateur ne peut naviguer sur un site car Javascript est désactivé dans le navigateur qu’il utilise : http://webyboom.canalblog.com/archives/2007/09/04/6095964.html .
Contrairement au cas cité, nous restons dans la modification de l’affichage : cela n’a rien à voir avec le fait d’utiliser par exemple un événement onclick sur un lien plutôt qu’un bouton submit pour valider un formulaire.
Tout ce qui arrivera aux utilisateurs d’IE6 sans Javascript sera un affichage dégradé. Le site restera tout à fait utilisable si l’on y prête attention, et il pourrait même être envisagé de masquer complètement les styles aux utilisateurs d’IE6 sans Javascript, dans le même esprit que l’utilisation de la règle @import dans le but de ne plus se soucier de la dégradation du style sur les navigateurs ayant un support limité de CSS.
Pour les navigateurs texte, les lecteurs d’écran et les navigateurs anciens, aucun problème : ce script ne s’applique qu’à IE6 en utilisant les commentaires conditionnels.
Concernant la mise à jour d’IE7.js, ma plus grosse attente (je ne l’ai jamais utilisé sur un projet) est le support des classes multiples par IE6, ce qui permettra enfin de pouvoir créer des structures souples basées sur la multiplicité des classes et de profiter pleinement de l’héritage des styles.
J’ai donc profité de cette mise à jour pour tester cette possibilité ( http://essais.pierrebertet.net/IE7/test1.htm ), mais IE7.js transforme les combinaisons de classes multiples en une classe unique créée, pour lui appliquer les styles. La priorité du sélecteur n’est donc pas préservée, et il faut prêter attention à l’ordre dans lequel les déclarations sont faites, ou alors « gonfler » artificiellement le poids du sélecteur.
Ce problème sera à priori réglé dans la prochaine mise à jour du script : http://code.google.com/p/ie7-js/issues/detail?id=9
Bruno >
Au sujet du reset CSS justement, comme le dit Eric Meyer : « /* remember to define focus styles! */ »
Un focus:0 est appliqué à tous les éléments de ce blog, y compris aux liens : il n’est donc plus possible de naviguer au clavier :/
#Pierre Bertet { Merci pour toutes ces précisions concernant le script et l’accessibilité, c’est exactement mon point de vue aussi, en mieux expliqué 😉
Concernant les classes multiples, je n’ai jamais remarqué de problèmes particuliers en utilisant par exemple div class= »class1 class2 class3″. A moins qu’il ne s’agisse d’autre chose.
C’est clair qu’il faut prendre se script avec des pincettes, mais je suis convaincu qu’il faut le tester et garder ce qui fonctionne, se serait-ce, comme tu le précise, « pour accompagner la fin de carrière de ce navigateur ».
Merci pour le rappel du :focus, c’est réparé ^_^v
}
Bruno Bichet >
Pour les classes multiples, je parle de leur sélecteur CSS, avec lequel
seule la dernière classe comptera pour IE6 :
.maclasse.monautreclasse{// IE6 comprend ".monautreclasse"
}
C’est bien réparé avec IE7.js, mais actuellement la priorité du
sélecteur n’est pas la même que sur les autres navigateurs.
Le sélecteur devrait avoir la priorité « classe + classe », ou 0020 selon ce mode de calcul, et elle n’est que « classe », soit 0010.
Désolé, j’ai tout cassé avec ma balise pre :/
Merci pour l’information, je vais de ce pas tester ça.
C’est clair que ce serait plus pratique de faire une correction ‘à la source’ plutot que des hacks dans tous les sens.
De plus quitte à mettre un Hack javascript pour les PNG, autant utiliser ce script qui devrait résoudre d’autres problèmes par la même occasion.
Excellente source d’informations ce site, je reviendrai 😉
Merci @seebz 🙂
Pour apporter quelques infos sur l’utilisation d’IE7, je suis en train de l’utiliser sur un projet et ça fonctionne plutôt bien. Je me contente pour l’instant d’inclure le fichier IE7.js qui permet à ie6 de se comporter comme ie7.
Bon, pour un début, je ne fais pas le kakou en faisant reposer sur le script des éléments-clés du design, mais ça apporte quand même un peu de confort, notamment sur les pseudo classes (:hover en particulier).
En tout cas, mis à part quelques pétouilles, j’ai fais le pari de tester le site uniquement sur FF et IE7 et de faire une session de rattrapage pour ie6 et j’ai eu la bonne surprise de n’avoir que peu de modifications à apporter au code.
tiens, une webapp qui permet de visualiser les différences entre IE6 et IE7 :
http://blog.sitxpress.com/index.php?2008/03/11/11-netrender-affichage-sous-ie55-ie6-ie7
@NetRender > Merci pour le lien qui se trouvait déjà caché dans la grosse grosse liste 🙂
Personnellement, j’utilise déjà JavaScript pour pallier à certains défauts de HTML et CSS dans le design, et en particulier si de telles astuces me permettent de gagner en performances de chargement en réduisant la quantité d’éléments externes chargés. Et si l’utilisateur n’a pas activé le JavaScript ? Euh… dans ce cas, il aura quelques imperfections ci-et-là, l’ensemble de la charte graphique reposant tout de même sur du HTML et CSS standard ou équivalent (la compatibilité ayant priorité sur la standardisation).
Maintenant, mieux vaut ne pas reposer sur le JavaScript pour garantir une bonne visualisation du design graphique. Néanmoins, pour le support d’anciens navigateurs peu compatibles, la tentation est importante, et j’aurais tendance à m’y adonner de plus en plus à l’avenir pour gagner du temps du développement et de cohérence entre navigateurs, d’autant que le JavaScript est de toutes façons de plus en plus présent sur des sites de plus en plus interactifs.
@Martin > C’est clair que se reposer sur du JS pour assurer les fondations d’un site n’est pas la meilleure idée du siècle… Pour la prise en compte des anciens navigateurs je pense que nous sommes globalement d’accord. Reste à déterminer ce qu’est un ancien navigateur 😀
Pour ma part, je fais confiance au script de Dean Edwards pour pallier les insuffisances d’IE6 que je considère déjà comme un vieux, même s’il est encore largement utilisé.
Evidemment, dans des cas spécifiques d’intranet patati patata… il faut revoir la copie et s’assurer que le site fonctionne aussi sans JS…
Mais bon, je crois qu’il faut être pragmatique et ne plus trop se poser des contraintes intenables en terme de « pureté » de codage : rien n’est moins pur que le développement web qui est le fruit illégitime d’une multitude de technologies toujours en développement :))
Le principe d’insérer ces codes javascript serait intéressant si cela fonctionnait.
Dans la pratique, j’ai testé le script ie8.js sur deux pages web et sur ces deux pages, la présentation est partie en vrac sous IE6 :
blocs se décalant dans tous les sens, images png qui disparaissent.
Pour les blocs qui se décalent, je pourrais sans doute solutionner le problème en écrivant une css spécifique à ie.
Pour les png en revanche, c’est plus compliqué :
si je supprime mon code javascript charger de corriger les problèmes de transparence sous IE6, les images png réapparaissent mais ne sont plus transparentes.
De fait j’ai des doutes sur l’utilité de ces scripts $crosoft : pour créer des pages simples, IE7/8.js me semblent n’avoir que peu d’intérêt, et pour créer des pages à la mise en page plus complexe, ça ne me semble pas très stable.