Detection du navigateur avec jQuery
Publié par Gui dans jQuery
Bien souvent, nous nous confrontons à des soucis d’inter-opérabilité entre certains navigateurs (IE pour ne pas le citer !). Les hacks CSS existent mais rendent la feuille de style non valide et altèrent la visibilité du code.
Un moyen simple et propre de contourner ces difficultés est de détecter le navigateur à l’aide de Javascript (jQuery en l’occurence).Ainsi grâce au plugin jQuery Browser, il est très facile de récupérer un objet javascript contenant les informations sur le navigateur (type, version, etc…), qui nous permettra d’effectuer différents traitements selon le navigateur de l’utilisateur.
alert($.browser.name); // Cela affichera 'firefox' alert($.browser.className) // firefox4
Encore mieux, il ajoute automatiquement des classes à la balise <HTML> pour facilement styliser de manière hiérarchique des éléments dont l’affichage diffère.
<html class="js win firefox firefox4 gecko gecko2">
Ainsi nous pouvons ajuster l’affichage pour différents navigateurs :
.chrome #monDiv{ background: red; }
.msie #monDiv{ background: blue; }
.safari #monDiv{ background: green; }
Informations et téléchargement ici: http://jquery.thewikies.com/browser/
Ces articles peuvent aussi vous intéresser :
5 commentaires
Laisser une réponse
Cool ce post, je cherchais justement à faire ça ! Merci
Merci pour cette découverte.
Dans la même veine : http://dev.neowebmag.com/php/detecter-navigateur-utilisateur
Pour info :
pour Android il affiche : Safari,
pour iPhone et iPad : Safari
Pas fait pour la détection de device donc =/
Haha
J’allais te contacter pour savoir si t’avais un moyen sympa pour détecter les navigateurs. Je cherche sur Google et je tombe sur ton blog. C’est beau, non ?
Bonjour,
En recherche sur le sujet et tentant de résoudre « des soucis l’inter-opérabilité », sachant que mon domaine c’est le droit des affaires,
J’ai juste fait un copier/coller de l’exemple d’alerte que vous proposez, bien sur :
– entre …
– encadré d’un $(document).ready(function(){
– juste avant
– le tout après avoir chargé jquery-1.9.1.min.js et jquery-2.0.0.js dans le
Réponse de Firebug : TypeError: $.browser is undefined
Ma question :
– que dois-je mettre, je suppose avant, afin de transformer l’alerte en variable pour générer, après, le CSS approprié.
Merci d’avance de votre aimable réponse et cordiales salutations
PS :
– Reward : réponse à toute question en droit des affaires… pour m’enrichir à partir de la problématique des autres.