Détecter le navigateur grâce à jquery

Comme tous les créateurs de site internet, une grosse partie de mon activité consiste à prévoir et corriger les différences d’interprétation du code en fonction du navigateur.

Essayant de plus en plus d’éviter d’utiliser des hacks css et ou des commentaires conditionnels, j’utilise souvent un bout de javascript non-intrusif et la librairie jQuery pour corriger ces « bugs » et pour que mes sites soient accessibles, ergonomiques et « jolis » peu importe le navigateur.

En bref, on va demander à jQuery de détecter le navigateur, et sa version si besoin. Après on va appliquer des corrections du css, selon le logiciel utilisé par l’internaute.

La méthode que je vais vous expliquer utilise donc la librairie jquery qu’il faut inclure juste avant la fermeture de la balise body.

Juste après l’avoir appelée, vous pouvez inclure ce script :

jQuery.each(jQuery.browser, function(i, val) {
if($.browser.msie){
if($.browser.version=='6.0'){
alert('your on ie6 !! change it!!');
}else{
alert('your on ie...');
}
}
if($.browser.webkit){
alert('safari or chrome !');
}
if($.browser.mozilla){
alert('mozilla power !');
}
if($.browser.opera){
alert('opera power !');
}
});
Détecter le navigateur Jquery

Vous l’avez compris, à la place des « alert » il va falloir mettre vos corrections, tout simplement.

On peut cibler soit le navigateur, soit une version précise d’un navigateur, soit un ensemble de version d’un navigateur (($.browser.msie’)&&($.browser.version<=’8.0′) par exemple).

L’intérêt d’utiliser cette méthode, c’est qu’elle va nous permettre d’utiliser les nombreux plugins jquery qui existent pour corriger le « non-support » des propriétés css3 sur certains navigateurs.

Sinon pour des simples corrections css, utiliser des codes du genre :
[cc lang= »javascript »]$(‘.maclasse’).css({atribut: »valeur »,attribut2: »valeur2″,…});[/cc]
Tout simplement…

1 commentaires
Jérémy, il y a 11 ans
Bonjour,

J’utilise cette méthode depuis un moment pour ajouter une classe spécifique à la balise html de façon à pouvoir surcharger mon css simplement.

Cependant, $.browser à disparu depuis la version 1.9.0 de JQuery… 🙁 As-tu trouvé un remplaçant pour cette méthode ?

PS : Super site et merci pour tes tutos WordPress!

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Publié le 06 juillet 2010
par Willy Bahuaud
Catégorie Intégration web