- crea una carpeta llamada "ejemplo"
- crea un documento .html en blanco, llamalo ejemplo.html y guardalo en la carpeta "ejemplo"
- pega este codigo en su interior
Código HTML:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.browser.js"></script> <script type="text/javascript">
/************************************************************************************/
if($.browser.name=='chrome')
{
document.write("
<link rel='stylesheet' href='chrome.css' />");
}
if($.browser.name=='msie')
{
document.write("
<link rel='stylesheet' href='ie.css' />");
}
if($.browser.name=='opera')
{
document.write("
<link rel='stylesheet' href='opera.css' />");
}
if($.browser.name=='firefox')
{
document.write("
<link rel='stylesheet' href='firefox.css' />");
}
if($.browser.name=='safari')
{
document.write("
<link rel='stylesheet' href='safari.css' />");
}
<a href="http://jquery.thewikies.com/browser/" target="_blank">Testeo de navegadores
</a> <p>http://jquery.thewikies.com/browser/
</p> <script type="text/javascript"> $("h2 a").hover(function(){$("h2 p").fadeIn(1000);},function(){$("h2 p").fadeOut(1000);});
/*
Características
*/
//browser.name: El nombre del navegador utilizado.
document.write("
<h1>browser.name: El nombre del navegador utilizado.
</h1>");
document.write($.browser.name); // this will alert 'chrome'
document.write("
<br/><br/>");
//browser.version: La versión del navegador (nota, como un string).
document.write("
<h1>browser.version: La versi
ón del navegador (nota, como un string).
</h1>");
document.write($.browser.version); // this will alert '7.0.517.44'
document.write("
<br/><br/>");
//browser.versionNumber: La versión del navegador (nota, como un entero).
document.write("
<h1>browser.versionNumber: La versi
ón del navegador (nota, como un entero).
</h1>");
document.write($.browser.versionNumber); // this will alert '7'
document.write("
<br/><br/>");
document.write($.browser.versionNumber + 1); // this will alert '8'
document.write("
<br/><br/>");
//browser.versionX: El lanzamiento del navegador (que 2x, 3x, etc.)
document.write("
<h1>browser.versionX: El lanzamiento del navegador (que 2x, 3x, etc.)
</h1>");
document.write($.browser.versionX); // this will alert '7'
document.write("
<br/><br/>");
//browser.className: El nombre del navegador y la versión del navegador como nombre de la clase.
document.write("
<h1>browser.className: El nombre del navegador y la versi
ón del navegador como nombre de la clase.
</h1>");
document.write($.browser.className); // this will alert 'chrome7'
document.write("
<br/><br/>");
//layout.name: El nombre del motor de diseño que se utiliza.
document.write("
<h1>layout.name: El nombre del motor de dise
ño que se utiliza.
</h1>");
document.write($.layout.name); // this will alert 'webkit'
document.write("
<br/><br/>");
//layout.version: La versión del motor de diseño (tenga en cuenta, como un string).
document.write("
<h1>layout.version: La versi
ón del motor de dise
ño (tenga en cuenta, como un string).
</h1>");
document.write($.layout.version); // this will alert '534.7'
document.write("
<br/><br/>");
//layout.versionNumber: La versión del motor de diseño (tenga en cuenta, como un entero).
document.write("
<h1>layout.versionNumber: La versi
ón del motor de dise
ño (tenga en cuenta, como un entero).
</h1>");
document.write($.layout.versionNumber); // this will alert '534.7'
document.write("
<br/><br/>");
document.write($.layout.versionNumber + 1); // this will alert '535.7'
document.write("
<br/><br/>");
//browser.versionX: La liberación del motor de diseño (que 2x, 3x, etc.)
document.write("
<h1>browser.versionX: La liberaci
ón del motor de dise
ño (que 2x, 3x, etc.)
</h1>");
document.write($.layout.versionX); // this will alert '5'
document.write("
<br/><br/>");
//layout.className: El nombre del navegador y la versión del navegador como nombre de la clase.
document.write("
<h1></h1>");
document.write($.layout.className); // this will alert 'webkit5'
document.write("
<br/><br/>");
//os.name: El sistema operativo utilizado.
document.write("
<h1></h1>");
document.write($.os.name); // this will alert 'win'
- crea 5 hojas de estilos y dales los siguientes nombres y copia en su interior el siguiente contenido:
chrome:
Código CSS:
Ver original*{font-family:tahoma; color:#cacaca; padding:0; margin:0; font-weight:bold;}
body{background:#eaeaea;}
h2 a{color:#707070; font-size:24px; text-decoration:none; padding:10px; margin:10px; }
h2 p{display:none; position:absolute; top:0; left:300px;}
h1{color:#707070; font-size:18px;}
div{margin:10px; padding:10px; background:#000000;}
ie:
Código CSS:
Ver original*{font-family:tahoma; color:#cacaca; padding:0; margin:0; font-weight:bold;}
body{background:#eaeaea;}
h2 a{color:#ff0000; font-size:24px; text-decoration:none; padding:10px; margin:10px; }
h2 p{display:none; position:absolute; top:0; left:300px;}
h1{color:#ff0000; font-size:18px;}
div{margin:10px; padding:10px; background:#000000;}
opera:
Código CSS:
Ver original*{font-family:tahoma; color:#cacaca; padding:0; margin:0; font-weight:bold;}
body{background:#eaeaea;}
h2 a{color:green; font-size:24px; text-decoration:none; padding:10px; margin:10px; }
h2 p{display:none; position:absolute; top:0; left:300px;}
h1{color:green; font-size:18px;}
div{margin:10px; padding:10px; background:#000000;}
firefox:
Código CSS:
Ver original*{font-family:tahoma; color:#cacaca; padding:0; margin:0; font-weight:bold;}
body{background:#eaeaea;}
h2 a{color:purple; font-size:24px; text-decoration:none; padding:10px; margin:10px; }
h2 p{display:none; position:absolute; top:0; left:300px;}
h1{color:purple; font-size:18px;}
div{margin:10px; padding:10px; background:#000000;}
safari:
Código CSS:
Ver original*{font-family:tahoma; color:#cacaca; padding:0; margin:0; font-weight:bold;}
body{background:#eaeaea;}
h2 a{color:orange; font-size:24px; text-decoration:none; padding:10px; margin:10px; }
h2 p{display:none; position:absolute; top:0; left:300px;}
h1{color:orange; font-size:18px;}
div{margin:10px; padding:10px; background:#000000;}
Finalmente, abre el documento ejemplo.html en los 5 navegadores.
El plugin es aún más amplio, pudiendo trabajar para las distintas versiones de los navegadores, para hacer esto solo modifica los condicionales añadiendo las versiones correspondientes.
Espero te sea útil, un abrazo.
p/d:
este link te puede ser util para detectar la resolución de la pantalla y actuar en consecuencia
este link te puede ser util para detectar el resize de la pantalla y actuar en consecuencia.
. Muy interesante la solucion creando clases que comentas.
