17
sep

jQuery Browser Detect 1.1

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.

¿Qué hace el script?
- Comprueba primero si el fichero de las css de cada navegador existe, si no existe, el script no se ejecuta, eto sirve para que el script no compruebe el navegador ni la versión del usuario.

¿Que ganamos con todo esto?
Rapidez en la ejecución del script, es decir, solo añadirá la hoja de estilos que tengamos en el directorio /css/browsers/.

- Detecta el navegador Internet Explorer 8.0

Script para comprobar rutas de ficheros físicos:

function file_exists (url) {
    var req = this.window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    if (!req) {throw new Error('XMLHttpRequest not supported');}
    req.open('HEAD', url, false);
    req.send(null);
    if (req.status == 200){
        return true;
    }
    return false;
}

Especificamos a jQuery los navegadores (Útil para diferenciar Safari de Chrome).

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 )
};

Ejecutamos las condiciones si el fichero existe o no, si existe, comprobamos la versión del navagador del usuario y añadimos la hoja de estilos.

//Ejecutamos las condiciones si el fichero existe o no.
$(document).ready(function(){
	jQuery.each(jQuery.browser, function(i, val) {
		if(file_exists("css/browsers/ie8.css") ){
			if(i=="msie" && jQuery.browser.version.substr(0,3)=="8.0"){
				$('head').append('<link rel="stylesheet" href="css/browsers/ie8.css" type="text/css" />');
			} 
		}
		if (file_exists("css/browsers/ie7.css")){
			if(i=="msie" && jQuery.browser.version.substr(0,3)=="7.0"){
				$('head').append('<link rel="stylesheet" href="css/browsers/ie7.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/ie6.css")){
			if(i=="msie" && jQuery.browser.version.substr(0,3)=="6.0"){
				$('head').append('<link rel="stylesheet" href="css/browsers/ie6.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/mozilla.css")){
			if($.browser.mozilla){
				$('head').append('<link rel="stylesheet" href="css/browsers/mozilla.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/opera.css")){
			if($.browser.opera){
				$('head').append('<link rel="stylesheet" href="css/browsers/opera.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/safari.css")){
			if($.browser.safari){
				$('head').append('<link rel="stylesheet" href="css/browsers/safari.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/chrome.css")){
			if($.browser.chrome){
				$('head').append('<link rel="stylesheet" href="css/browsers/chrome.css" type="text/css" />');
			}
		}
	});
});

Hojas de estilos predefinidas en el script:
Internet Explorer 8.0ie8.css
Internet Explorer 7.0ie7.css
Internet Explorer 6.0ie6.css
Mozilla Firefoxmozilla.css
Chromechrome.css
Operaopera.css
Safarisafari.css

Nota:
- Navegadores que soporta: IE8, IE7, IE6, Mozilla Firefox, Safari, Opera, Google Chrome
- El script comprobará los ficheros en el directorio ‘css/browsers/nombre_del_navegador.css’.

Podéis ver el ejemplo aquí.
Descargar script: aquí.

05
jun

jQuery Browser Detect

Versión mejorada del script: aquí.

08
abr

Múltiples navegadores

Gracias a los múltiples navegadores podemos testear todas nuestra webs, especialmente para las versiones del navegador Internet Explorer. Aquí os comento los que mejor funcionan.

IEtester, incorpora todas las versiones de IE posibles (IE5.5, IE6, IE7 y IE8) funciona en Windows XP y Windows Vista.
Lo puedes descargar: aquí.

Sin embargo también hay otro producto que me llamó la atención ya que puedes ejecutar el navegador que gustes sin instalar nada, simplemente ejecutándolo.

Puedes elegir entre estos navegadores: Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox 3, Firefox 2, Google Chrome, Opera, Safari.