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.0 – ie8.css
Internet Explorer 7.0 – ie7.css
Internet Explorer 6.0 – ie6.css
Mozilla Firefox – mozilla.css
Chrome – chrome.css
Opera – opera.css
Safari – safari.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í.
