Morton 13 de febrero de 2011 a las 09.15
   Imprimir artículo
elWebmaster.com

Mootools: C贸mo usar el objeto Browser para crear CSS condicional al navegador


mootoolswideTodos necesitamos en nuestros sitios web un poco de CSS espec铆fico para cada navegador y versi贸n. Intentamos seguir est谩ndares, pero al final quedamos a la merced de los navegadores y sus bugs. Aqu铆 te explicamos c贸mo utilizar el objeto Browser de Mootols para modificar nuestro c贸digo y crear condicionales CSS.

Fuente original del art铆culo: David Walsh Blog
Traducci贸n realizada por
elWebmaster.com

Usaremos el objeto Browser para agregar clases que describan al navegador y su versi贸n:

  1. // Obtenemos el tag HTML
  2. var htmlTag = document.id(document.documentElement);
  3. // A帽adimos el nombre de la clase del navegador
  4. htmlTag.addClass(Browser.name);
  5. // Agregamos el nombre del navegador m谩s la clase de la versi贸n
  6. htmlTag.addClass(Browser.name + Browser.version);

Si el visitante utiliza Safari para navegar nuestro sitio web, el tag HTML de nuestro c贸digo se ver谩 as铆:

  1. <html class="safari safari5">

驴Cu谩l es exactamente la utilidad de esto? Que ahora puedes escribir CSS espec铆fico para el navegador, que se ver谩 as铆:

  1. .safari .animation { -webkit-border-radius:5px; -webkit-transform:scale(1) rotate(16.768rad); }
  2. .firefox .animation { -moz-border-radius:5px; -moz-transform:scale(1) rotate(16.768rad); }

隆Y listo! Esperamos que te haya sido de utilidad. 隆Hasta la pr贸xima!

Fuente original del art铆culo: David Walsh Blog
Traducci贸n realizada por
elWebmaster.com


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (3)

  1. Usar el objeto Browser de Mootools para crear condicionales CSS | CSSBlog ES dice:

    […] V铆a | EW […]

  2. Francisco dice:

    :) joya :)

  3. marko dice:

    muy bueno gracias…

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder