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/

4 commentaires

  1. Julien P.

    Cool ce post, je cherchais justement à faire ça ! Merci :)

  2. Jack NUMBER

    Pour info :
    pour Android il affiche : Safari,
    pour iPhone et iPad : Safari

    Pas fait pour la détection de device donc =/

  3. Florian Brochard

    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 ?

Laisser une réponse


Post shadow