16
Mar

Detectar el navegador mediante jQuery

Versión mejorada del script: aquí.

Este script nos ayudará cuando maquetemos nuestras hojas de estilos y veamos que cada navegador interpretan cosas que no deberían ser así, muy común en IE, sobretodo en la versión 6.

Antes de nada, se necesita la librería jquery para hacer funcionar el script.

Dividimos el script en dos partes, la primera detectamos los navegadores más comunes:

var userAgent = navigator.userAgent.toLowerCase();
jQuery.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
	chrome: /chrome/.test( userAgent ),
	safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

Una vez el script detecta el navegador que estamos utilizando pasaremos los condicionales para escribir una ruta de css u otra:

if ($.browser.chrome) {
	document.write("<link rel='stylesheet' type='text/css' href='css/browsers/chrome.css'>");
	}else if ($.browser.msie){
   		if ($.browser.version>=7){
	  document.write("<link rel='stylesheet' type='text/css' href='css/browsers/ie7.css'>");
   		}else{
	  		document.write("<link rel='stylesheet' type='text/css' href='css/browsers/ie6.css'>");
   		}
	}else if ($.browser.safari) {
    document.write("<link rel='stylesheet' type='text/css' href='css/browsers/safari.css'>");
	}else if ($.browser.opera) {
    document.write("<link rel='stylesheet' type='text/css' href='css/browsers/opera.css'>");
	}else if ($.browser.mozilla) {
    document.write("<link rel='stylesheet' type='text/css' href='css/browsers/firefox.css'>");
	}
	

Por ejemplo, la primera condición dice, si estás utilizando el navegador Chrome añadirá:

<link rel='stylesheet' type='text/css' href='css/browsers/chrome.css'>

Al final de la etiqueta:

</html>

Versión mejorada del script aquí.

Bookmark and Share
aaa

5 Comentarios

Tienes que estar conectado para publicar un comentario.

Comentarios RSS Feed   TrackBack URL