Tema: Hack para navegadores y reglas distintas!!
Ver Mensaje Individual
  #12 (permalink)  
Antiguo 06/03/2011, 16:50
Avatar de cristian_cena
cristian_cena
Colaborador
  
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 15 años, 5 meses
Puntos: 269
Respuesta: Hack para navegadores y reglas distintas!!
- 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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  5.     <title>probando</title>
  6.     <script type="text/javascript" src="jquery.min.js"></script>
  7.     <script type="text/javascript" src="jquery.browser.js"></script>
  8.     <script type="text/javascript">
  9.     
  10.     /************************************************************************************/
  11.         if($.browser.name=='chrome')
  12.         {
  13.         document.write("<link rel='stylesheet' href='chrome.css' />");
  14.         }
  15.         if($.browser.name=='msie')
  16.         {
  17.         document.write("<link rel='stylesheet' href='ie.css' />");
  18.         }
  19.         if($.browser.name=='opera')
  20.         {
  21.         document.write("<link rel='stylesheet' href='opera.css' />");
  22.         }
  23.         if($.browser.name=='firefox')
  24.         {
  25.         document.write("<link rel='stylesheet' href='firefox.css' />");
  26.         }
  27.         if($.browser.name=='safari')
  28.         {
  29.         document.write("<link rel='stylesheet' href='safari.css' />");
  30.         }
  31.     
  32.     </script>
  33.     
  34. </head>
  35. <body>
  36.     <h2>
  37.     <a href="http://jquery.thewikies.com/browser/" target="_blank">Testeo de navegadores</a>
  38.     <p>http://jquery.thewikies.com/browser/</p>
  39.     </h2>
  40.     <div>
  41.         <script type="text/javascript">
  42.         $("h2 a").hover(function(){$("h2 p").fadeIn(1000);},function(){$("h2 p").fadeOut(1000);});
  43.         /*
  44.         Características
  45.         */
  46.         //browser.name: El nombre del navegador utilizado.
  47.         document.write("<h1>browser.name: El nombre del navegador utilizado.</h1>");
  48.         document.write($.browser.name); // this will alert 'chrome'
  49.         document.write("<br/><br/>"); 
  50.         
  51.         //browser.version: La versión del navegador (nota, como un string).
  52.         document.write("<h1>browser.version: La versión del navegador (nota, como un string).</h1>");
  53.         document.write($.browser.version); // this will alert '7.0.517.44'
  54.         document.write("<br/><br/>");
  55.         
  56.         //browser.versionNumber: La versión del navegador (nota, como un entero).
  57.         document.write("<h1>browser.versionNumber: La versión del navegador (nota, como un entero).</h1>");
  58.         document.write($.browser.versionNumber); // this will alert '7'
  59.         document.write("<br/><br/>");
  60.         document.write($.browser.versionNumber + 1); // this will alert '8'
  61.         document.write("<br/><br/>");
  62.         
  63.         //browser.versionX: El lanzamiento del navegador (que 2x, 3x, etc.)
  64.         document.write("<h1>browser.versionX: El lanzamiento del navegador (que 2x, 3x, etc.)</h1>");
  65.         document.write($.browser.versionX); // this will alert '7'
  66.         document.write("<br/><br/>");
  67.         
  68.         //browser.className: El nombre del navegador y la versión del navegador como nombre de la clase.
  69.         document.write("<h1>browser.className: El nombre del navegador y la versión del navegador como nombre de la clase.</h1>");
  70.         document.write($.browser.className); // this will alert 'chrome7'
  71.         document.write("<br/><br/>");
  72.         
  73.         //layout.name: El nombre del motor de diseño que se utiliza.
  74.         document.write("<h1>layout.name: El nombre del motor de diseño que se utiliza.</h1>");
  75.         document.write($.layout.name); // this will alert 'webkit'
  76.         document.write("<br/><br/>");
  77.         
  78.         //layout.version: La versión del motor de diseño (tenga en cuenta, como un string).
  79.         document.write("<h1>layout.version: La versión del motor de diseño (tenga en cuenta, como un string).</h1>");
  80.         document.write($.layout.version); // this will alert '534.7'
  81.         document.write("<br/><br/>");
  82.         
  83.         //layout.versionNumber: La versión del motor de diseño (tenga en cuenta, como un entero).
  84.         document.write("<h1>layout.versionNumber: La versión del motor de diseño (tenga en cuenta, como un entero).</h1>");
  85.         document.write($.layout.versionNumber); // this will alert '534.7'
  86.         document.write("<br/><br/>");
  87.         document.write($.layout.versionNumber + 1); // this will alert '535.7'
  88.         document.write("<br/><br/>");
  89.         
  90.         //browser.versionX: La liberación del motor de diseño (que 2x, 3x, etc.)
  91.         document.write("<h1>browser.versionX: La liberación del motor de diseño (que 2x, 3x, etc.)</h1>");
  92.         document.write($.layout.versionX); // this will alert '5'
  93.         document.write("<br/><br/>");
  94.         
  95.         //layout.className: El nombre del navegador y la versión del navegador como nombre de la clase.
  96.         document.write("<h1></h1>");
  97.         document.write($.layout.className); // this will alert 'webkit5'
  98.         document.write("<br/><br/>");
  99.         
  100.         //os.name: El sistema operativo utilizado.
  101.         document.write("<h1></h1>");
  102.         document.write($.os.name); // this will alert 'win'
  103.         </script>
  104.     </div>
  105. </body>
  106. </html>

- crea 5 hojas de estilos y dales los siguientes nombres y copia en su interior el siguiente contenido:

chrome:
Código CSS: 
Ver original
  1. *{font-family:tahoma; color:#cacaca; padding:0; margin:0; font-weight:bold;} 
  2. body{background:#eaeaea;}
  3. h2 a{color:#707070; font-size:24px; text-decoration:none; padding:10px; margin:10px; }
  4. h2 p{display:none; position:absolute; top:0; left:300px;}
  5. h1{color:#707070; font-size:18px;}
  6. div{margin:10px; padding:10px; background:#000000;}
ie:
Código CSS: 
Ver original
  1. *{font-family:tahoma; color:#cacaca; padding:0; margin:0; font-weight:bold;} 
  2. body{background:#eaeaea;}
  3. h2 a{color:#ff0000; font-size:24px; text-decoration:none; padding:10px; margin:10px; }
  4. h2 p{display:none; position:absolute; top:0; left:300px;}
  5. h1{color:#ff0000; font-size:18px;}
  6. div{margin:10px; padding:10px; background:#000000;}
opera:
Código CSS: 
Ver original
  1. *{font-family:tahoma; color:#cacaca; padding:0; margin:0; font-weight:bold;} 
  2. body{background:#eaeaea;}
  3. h2 a{color:green; font-size:24px; text-decoration:none; padding:10px; margin:10px; }
  4. h2 p{display:none; position:absolute; top:0; left:300px;}
  5. h1{color:green; font-size:18px;}
  6. div{margin:10px; padding:10px; background:#000000;}
firefox:
Código CSS: 
Ver original
  1. *{font-family:tahoma; color:#cacaca; padding:0; margin:0; font-weight:bold;} 
  2. body{background:#eaeaea;}
  3. h2 a{color:purple; font-size:24px; text-decoration:none; padding:10px; margin:10px; }
  4. h2 p{display:none; position:absolute; top:0; left:300px;}
  5. h1{color:purple; font-size:18px;}
  6. div{margin:10px; padding:10px; background:#000000;}
safari:
Código CSS: 
Ver original
  1. *{font-family:tahoma; color:#cacaca; padding:0; margin:0; font-weight:bold;} 
  2. body{background:#eaeaea;}
  3. h2 a{color:orange; font-size:24px; text-decoration:none; padding:10px; margin:10px; }
  4. h2 p{display:none; position:absolute; top:0; left:300px;}
  5. h1{color:orange; font-size:18px;}
  6. 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.