Dernièrement, j’ai eu à produire un correctif sur un script de détection de version de navigateur assez âgé. Ce script en particulier détectait quelques navigateurs en particulier afin de leur afficher un message comme quoi leur expérience de navigation serait optimale s’ils utilisaient une version récente de Firefox, Google Chrome ou Internet Explorer.
La principale faiblesse de ce script était qu’il faisait une détection de navigateur basée sur le numéro de version.
Une mise en contexte historique s’impose
Le quatre septembre 2012 fut la date où le navigateur Internet Explorer 10 a été mis à la disposition des internautes. Cette version d’Internet Explorer est celle qui respecte mieux les standards du web (HTML5 et CSS3). Sur papier, tout est parfait dans le meilleur des mondes. N’est-ce pas?
Là où j’ai eu à intervenir, est que cette fameuse détection de navigateur se faisait, disons-le, dans le mauvais sens du poil. Il a été mentionné que les visiteurs utilisant Internet Explorer 10 se faisaient présenter l’avertissement de navigateur que j’ai mentionné en introduction.
Tant pis pour eux que je me suis initialement dit. Toutefois, il fallait investiguer et trouver une solution permanente.
Une détection simpliste
À vrai dire, il s’agissait, à mon avis, de la pire méthode possible pour détecter la version du navigateur. C’est à dire, l’utilisation de la fonctionnalité jQuery.browser.
Truc de pro : jQuery.browser est déprécié depuis déjà un bon moment. Ne l’utilisez plus. OK?
L’appel en question avait l’air de la chose suivante : jQuery.browser.msie && jQuery.browser.version <= ‘7’. D’ailleurs, cette ligne en question est présente dans beaucoup de résultats Google.
Or, dans le cas du navigateur Internet Explorer 10, comparer la valeur de jQuery.browser.version à la chaîne ‘7‘ revient à la comparaison suivante : ‘10‘ <= ‘7‘. Exécutez cette comparaison dans la console JavaScript de votre navigateur. Le résultat retourné sera « True« .
À première vue, le résultat semble incohérent. N’est-il pas un peu étrange que 10 soit plus petit que 7? Si vous regardez comme il faut,vous remarquerez qu’il s’avère que ce sont deux chaînes qui sont comparées. Comment voulez-vous que le compilateur sache quoi faire avec?
À ce point-ci, je présume que l’auteur initial du script n’avait pas pensé qu’il avait affaire à des chaînes plutôt qu’à des nombres. Dans un cas comme celui-ci, JavaScript compare le premier caractère de chacune des chaînes pour déterminer le résultat de la comparaison. Au minimum, pour avoir été cohérent dans l’approche, il aurait fallu utiliser la fonction parseInt afin d’extraire la valeur numérique de la chaîne.
Au final, la comparaison en question revient à comparer les valeurs de 1 <= 7. Ce qui donne le résultat cité plus haut.
La bonne façon
J’ai précédemment mentionné que la détection du navigateur basé sur le numéro de la version était la pire des façons de déterminer à quel navigateur vous avez affaire.
Dans le meilleur des mondes, il est préférable d’opter pour une stratégie détection de fonctionnalité dans le cas où vous désirez viser certains navigateurs anciens. La principale raison de cela est que jQuery.Browser est déprécié depuis la version 1.3 de jQuery et n’existe plus depuis la version 1.9 (la version courante).
Par exemple, dans le cas qui nous intéresse, la détection d’Internet Explorer 7 aurait pu se faire par la détection du support de certaines propriétés CSS ou fonction reliée au DOM HTML tel que suggéré par Mozilla. Il y a même certaines stratégies plus avancées qui sont suggérées par ce billet.
Parlant de détection de navigateurs, Microsoft a même une page dédiée à la détection d’Internet Explorer. Vous pourriez vous laisser tenter et suivre leurs conseils afin de vous assurer que vos visiteurs utilisent bien Internet Explorer.
French Coding 