Pourquoi le reniflage du navigateur n'est-il pas une pratique recommandée ?

Question

On l'entend partout : l'utilisation de javascript pour renifler la chaîne user agent afin de détecter les versions des navigateurs est une très mauvaise chose. La dernière version de jQuery a maintenant déprécié la fonction $.browser à la place de l'objet $.support . Mais que dois-je faire s'il y a un bogue ou un problème qui n'affecte qu'IE et pas les autres navigateurs, et que je ne sais pas pourquoi ?

Dans mon cas, un code jQuery fait apparaître et disparaître une infobulle avec une animation au passage de la souris et à la sortie de la souris. Dans Internet Explorer, l'aspect est horrible et instable, la div de l'info-bulle changeant de taille avant de disparaître, et si vous passez votre souris sur un tas d'éléments avec l'info-bulle, cela tue le navigateur. Je n'ai aucune idée de la fonctionnalité particulière qu'IE ne "supporte" pas et que je devrais tester, donc il est beaucoup plus facile de simplement renifler IE et d'utiliser une méthode différente. Que pourrais-je/devrais-je faire à la place ?

Answer 1

Parce que le simple fait de renifler l'agent utilisateur (ce que fait jquery pour remplir l'objet $.browser) ne vous dit pas toute la vérité.

La chaîne de l'agent utilisateur peut être facilement modifiée dans de nombreux navigateurs. Ainsi, si vous désactivez par exemple certaines fonctions qui ne fonctionnent pas dans IE, tous les utilisateurs de l'application pourront les utiliser. semble pour utiliser IE, vous risquez de désactiver accidentellement ces fonctionnalités pour certains navigateurs futurs ou pour des utilisateurs qui, pour une raison quelconque (comme par exemple pour contourner les limitations basées sur le reniflage du navigateur), prétendre d'utiliser IE.

Cela ne semble pas être un gros problème, mais c'est tout de même mauvaise pratique .

Et oui, je suis aussi un renifleur d'IE. J'utilise

$.browser.msie && document.all

juste pour être sûr.

Answer 2

La première chose à noter est que le reniflage de l'agent utilisateur ne consiste pas seulement à regarder navigator.userAgent Il s'agit d'un terme général pour décrire le large éventail de méthodes que les gens utilisent pour modifier un comportement en fonction de ce qu'ils croient être le navigateur.

Le problème est donc pas En regardant la chaîne de l'agent utilisateur, le problème est de décider ce que votre site doit faire en fonction de ce que vous pensez être le navigateur. Cela signifie que vous pouvez inévitablement limiter ou casser votre site à l'avenir ; par exemple, j'ai vu de nombreuses démos de toile qui bloquent IE. Ils ne vérifient pas si la toile est prise en charge, ils recherchent explicitement IE, et s'ils le voient, ils disent que IE est cassé, ce qui signifie que même si IE finissait par prendre en charge la toile, ces sites ne fonctionneraient toujours pas.

Plutôt que de renifler le navigateur, vous devriez toujours essayer de détecter la fonctionnalité ou le bogue qui vous intéresse. L'exemple le plus courant de ces tests est la "détection d'objets", par ex. document.createElement("canvas").getContext est la façon dont l'existence du canevas doit être détectée, et permettra de détecter correctement le canevas dans n'importe quel navigateur, même si les versions actuelles ne le prennent pas en charge.

Answer 3

Outre le fait que le reniflage du navigateur est inférieur au reniflage des capacités, le traitement de navigator.userAgent en tant que chaîne de caractères est en soi un moyen très peu fiable de renifler le navigateur.

Cela pourrait fonctionner mieux si tous les navigateurs s'en tenaient au schéma "Nom/version" pour s'identifier, mais ils ne le font pas. La plupart des navigateurs prétendent être "Mozilla/quelque version", indépendamment de ce qu'ils sont. Et cette partie au début est la seule partie facilement analysable de la chaîne ; le reste est complètement non standardisé. Donc scripts ont commencé à chercher dans toute la chaîne des sous-chaînes de caractères comme "MSIE". C'est un désastre.

• Certains navigateurs se falsifient délibérément, en incluant des sous-chaînes comme "MSIE", "Gecko" et "Safari" dans leurs chaînes d'agent utilisateur alors qu'ils ne sont pas ces navigateurs, principalement pour déjouer les renifleurs de chaînes mal conçus.

• Certains navigateurs permettent d'usurper l'intégralité de la chaîne de l'agent utilisateur sous le contrôle de l'utilisateur.

• Certaines variantes de navigateur ne le sont pas. Par exemple, IE Mobile n'a rien à voir avec IE normal, mais "MSIE" lui correspondra toujours.

• Certains navigateurs permettent aux modules complémentaires d'écrire des éléments supplémentaires dans la chaîne de l'agent utilisateur, y compris du texte arbitraire. Une seule modification du registre par un module complémentaire malveillant peut faire passer MSIE pour Firefox.

• La correspondance des chaînes de caractères n'est pas fiable en soi. Par exemple, un nouveau navigateur appelé "CLUMSIERbrowser" correspondrait à MSIE.

Answer 4

En effet, si vous vous trompez, vous risquez de priver accidentellement de certaines fonctionnalités les futurs navigateurs qui les prennent en charge.

Je le trouve souvent utile. I connaître IE6 ne prend pas en charge la transparence alpha. J'utilise donc le reniflage du navigateur pour détecter IE6 et masquer/modifier les éléments qui les utilisent.

De même, pour passer rapidement la souris de nombreuses fois, essayez de HoverIntent . Il utilise setTimeout(), je crois, pour ne déclencher des événements que lorsque la souris est restée sur un élément pendant une brève période, ce qui permet d'économiser des cycles et d'éviter la mise en file d'attente des événements et le gel potentiel du navigateur.

Personnellement, j'ai préféré jQuery avec les méthodes de version/type de navigateur. On pouvait l'utiliser pour afficher un message de bienvenue amical en fonction du navigateur. Peut-être que jQuery l'a déprécié en raison de la pression exercée par le fait que "le reniflage du navigateur est un mal".

Mise à jour

C'est ce que dit John Resig (créateur de jQuery) :

Nous gardons jQuery.browser dans un avenir proche. dans un avenir proche, mais nous voulons que les développeurs cessent de l'utiliser - et le meilleur moyen d'inciter les développeurs à le faire est de devenir un bon exemple de modèles de développement appropriés.

Pour être clair : Les points inclus dans $.support sont principalement des bogues de navigateur navigateur (les bogues d'IE qui ne peuvent pas être testés avec la détection normale d'objets) - et ils n'englobent pas tous les bogues possibles bogues possibles (seulement une douzaine environ). Il est s'attendre à ce que d'autres développeurs ajouteront leurs propres points de test dans le l'avenir.

Aussi, dans cet engagement, j'ai oublié d'atterrir le fichier support.js actuel - il peut être trouvé ici : http://dev.jquery.com/browser/trunk/jquery/src/support.js?rev=5986

Source : http://www.reddit.com/r/programming/comments/7l2mr/jquery_removes_all_browser_sniffing/

Voir aussi : http://dev.jquery.com/changeset/5985

Answer 5

J'utilise une combinaison de trucs que j'ai appris du boilerplate HTML5 et de jquery, donc en utilisant les commentaires conditionnels IE pour déterminer la version IE, puis tester l'existence de ces classes. Le HTML aurait donc ceci en haut :

<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

Ensuite, je testerais l'existence de .ie6, .ie7 etc. dans jquery comme ceci :

if($('.ie6, .ie7').length > 0){
    // your conditional stuff here
}

Ça marche bien pour moi.

REMARQUE : Il est évident que ce test ne concerne que les versions d'IE, mais la plupart des autres navigateurs ne posent pas les mêmes problèmes qu'IE de nos jours et c'est beaucoup plus sûr que de tester l'agent utilisateur !