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