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í.
5 Comentarios
Tienes que estar conectado para publicar un comentario.
[...] Eliminar borde en el elemento selectMenú rollover con CSSDetectar el navegador mediante jQuery [...]
Marzo 18th, 2009 at 19:07[...] nuestras hojas de estilo IE6 del Browser detect jQuery, de esta forma tendremos nuestra hoja de estilos principal validada y en la hoja de estilos de IE6 [...]
Marzo 19th, 2009 at 18:32[...] del iFrame. La librería jquery-1.3.2.min.js es el motor de la web (por así decirlo). Utilizo el Browser detect (browser.detect.js) porque para llamar al iframe se utilizan ‘filter’ y así especifico [...]
Marzo 23rd, 2009 at 10:47[...] jquery, detectar navegador del usuario [...]
Marzo 26th, 2009 at 14:02[...] varios meses hice un script para detectar el navegador mediante jquery, pues bien, he mejorado el script. Nuevas funcionalidades del script jquery.browser.detect [...]
Junio 5th, 2009 at 12:02