Détecter le navigateur avec jQuery

jQuery permet de détecter le navigateur utilisé ainsi que sa version, mais cette fonctionnalité a été supprimée depuis la version jQuery 1.9, donc vous ne pouvez l'utiliser que jusqu'à la version 1.8.x.

Connaître le navigateur

La variable jQuery.browser contient le navigateur utilisé, cette variable est définie automatiquement à l'initialisation de jQuery et se présente sous forme d'un booléen qui vaut true, et dont le nom est dans cette liste :

• webkit : Google Chrome, Apple Safari
• safari : Apple Safari (sur mac et pc)
• opera : Opera (presto)
• msie : Internet Explorer
• mozilla : Firefox

En règle général on se sert de ça pour détecter internet explorer, qui est souvent le seul navigateur qui pose des problèmes...

Connaître la version du navigateur

La version du navigateur est stockée séparément dans la variable jQuery.browser.version. Voici un exemple qui montre comment se servir de ces 2 informations (navigateur et version) pour effectuer un traitement spécifique :

if( $.browser.msie == true && $.browser.version < 9 ){
	alert("Vous utilisez Internet Explorer 8 ou antérieur");
}

Allez donc jeter un oeil sur cette page : fusionner des cellules excel.

jQuery.browser n'existe plus

Comme je l'ai écrit au début de ce tuto, les développeurs jQuery ont décidé de supprimer cette fonctionnalité depuis la version 1.9. La raison de ce choix est que ce type de détection est une mauvaise pratique, la bonne pratique étant de déterminer si le navigateur supporte telle ou telle fonction directement, plutôt que de le "déduire" arbitrairement et abusivement. Il existe des framework javascript spécialisés dans la détection de fonctionnalité, comme Modernizr : http://modernizr.com/.

Si vous souhaitez continuer à utiliser des conditions sur le navigateur sans utiliser d'autre framework que jQuery, le plus simple est d'appliquer une expression régulière sur le user agent :

function is_old_internet_explorer(){
	var matches = navigator.userAgent.match(/(msie) ([\w.]+)/i);
	if( matches[2] < 9 ){
		return true;
	}
	return false;
}

Découvrez ce tutoriel photoshop : maison montgolfière à lire tout de suite !