monitojoomla

Tip - CSS3 y HTML5 con Modernizr

Domingo, 04 Julio 2010 | Escrito por Jhon Marreros Guzman

Detalles Tip - Nivel : Intermedio, Formato : texto y video
Modernizr es una librería javascript que nos ayuda a tener un control en el uso de CSS3 Y HTML5 cuando nuestra página web se muestra en navegadores que no soportan estas tecnologías.

En es siguiente video se muestra el uso de esta librería, se trabaja con la propiedad CSS3 boxshadow y con el atributo placeholder de HTML5

1-Estilo general del contenedor

La siguiente imagen muestra cómo luce nuestra caja contenedora cuando aplicamos el estilo general

El estilo básicamente consiste de dos bordes de 1px, derecho e inferior que simulan un sombreado

 /*simula el sombreado - Estilo general*/
div.cajasombra{
 border-bottom: 1px solid #666;
 border-right: 1px solid #666;
}

2-Haciendo referencia a Modernizr

Esta librería lo podemos descargar de la página oficial de modernizr, y después de hacerle referencia en nuestro archivo html, nos ayudamos de la extensión firebug de firefox para poder ver las clases que nos genera.

Como podemos observar en la imagen anterior, la librería nos ha generado una serie de clases en la etiqueta html, los nombres de las clases representan los nombres de las propiedades y atributos que soporta el navegador, el primer nombre de clase "js" representa que javascript esta habilitado. Para este ejemplo lo que nos interesa es la propiedad boxshadow.

3-Utilizando la clase boxshadow generada

Sobrepondremos los estilos del contenedor con la clase boxshadow generada

/*sombreado CSS3*/
.boxshadow div.cajasombra{
 border: none;
 box-shadow:#666 5px 5px 10px;
 -moz-box-shadow:#666 5px 5px 10px;
 -webkit-box-shadow:#666 5px 5px 10px;
}

Después de aplicar esta clase, la cual se utilizará en los navegadores que soportan el sombreado, nuestra caja contenedora lucirá como la siguiente imagen.

4-Utilizando Modernizr para HTML5

Para este ejemplo haremos uso de javascript, Modernizr nos crea un objeto a través del cual podemos consultar las propiedades y atributos que soporta determinado navegador. El ejemplo consiste en el uso del atributo placeholder de HTML5, para los navegadores que soporten este atributo, ocultaremos la etiqueta label.

Código html, con una etiqueta label y una etiqueta input, la cual tiene un atributo placeholder

<label id ="lblnombre" for="nombre">Nombre:</label>
 <input id="nombre" type="text" value="" maxlength="40" placeholder="nombre" />

En el siguiente código javascript, hacemos uso de la librería mootools para mayor facilidad, estamos utilizando el objeto Modernizr creado para consultar si el navegador soporta el atributo placeholder, y si lo soporta estamos ocultando el label.

window.addEvent('domready',function(){
 
 if (Modernizr.input.placeholder){
 $('lblnombre').setStyle('display','none');
 }
 
 })

En la siguiente imagen se muestra la salida de nuestra página para los diferentes navegadores.

5-Conclusión

Bajo la filosofía de que una página web no tiene por que lucir igual en todos los navegadores, Modernizr nos brinda una gran ayuda para poder hacer uso de la potencia de las nuevas tecnologías mientras conservamos un nivel aceptable de diseño en los navegadores que todavía no la soportan.

• Demostración on line
• Descargar archivos

Comparte este post