Degradados(gradientes) para IE y navegadores viejos ¿Qué es Modernizr.js?
a grandes rasgos Modernizr.js es una librería que nos indica si nuestro navegador tiene soporte con esas tecnologías nuevas que trae con sigo HTML5 pueden descargar la versión de producción en [URL="http://www.modernizr.com/"]http://www.modernizr.com/[/URL] que es la que necesitamos para este ejemplo dado que la versión de desarrollo no tiene el método modernizr.load() que es el que necesitamos.
Si desean saber mas de modernizr.js les recomiendo el manuel de Miguel Angel Alvares en [URL="http://www.desarrolloweb.com/manuales/manual-modernizr.html"]http://www.desarrolloweb.com/manuales/manual-modernizr.html[/URL]
¿Cómo Funciona?
Primero que nada hay que importar nuestra libreria como cualquier otra.
Código:
Modernizr.js agrega en este caso la clase cssgradientst a nuestra etiqueta <html> de manera automática si este tiene soporte.<script src="js/modernizr.js"></script>
Código:
Este que es el mejor de los casos solo deberíamos de cargar nuestra hoja de estilos con nuestros degrados. <html lang="es" class="cssgradients">
En el caso contrario que es el caso interesante de este tema necesitamos cargar polyfills, que son librerías adicionales para incorporar las características de HTML5 cuando el navegador no tiene soporte nativo para estas.
Código:
test:// verifica si el navegador tiene soporte con dicha clase<script type="text/javascript">
Modernizr.load({
test: Modernizr.cssgradients ,
nope: ['modernizr/style.css'],
both: ['css/style.css' ]
});
</script>
nope:// si no tiene soporte carga dicho archivo
both:// carga los archivos cuando el navegador tiene soporte y cuando no
Ahora necesitamos cargar nuestro polyfills a nuestra hoja de estilos para navegadores que no tengan soporte,aqui pueden encontrar la libreria[URL="http://css3pie.com/"]http://css3pie.com/[/URL]
modernizr/style.css
Código:
El archivo PIE.php hace referencia a el archivo PIE.htc recomiendo cargar el archivo php para no modificar el .htaccess del servidor..degradado {
background: #a37b50;
-pie-background: linear-gradient(#a37b50, #2b1300);
behavior: url(modernizr/PIE.php);
}
NOTA:La ruta del archivo debe de ser referente al archivo html y no con respecto de la hoja de estilos.
Generamos también nuestros degradados para loa navegadores que si tienen soporte nativo.
css/style.css
Código:
y ahora implementamos lo hecho hasta ahora.degradado {
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#a37b50), to(#2b1300));
background: -webkit-linear-gradient(#a37b50, #2b1300);
background: -moz-linear-gradient(#a37b50, #2b1300);
background: -ms-linear-gradient(#a37b50, #2b1300);
background: -o-linear-gradient(#a37b50, #2b1300);
background: linear-gradient(#a37b50, #2b1300);
}
Código:
y final mente nos queda algo asi:<div class="degradado">Gradientes para todos</div>
Código:
Espero les aya servido de algo. Excelente día para todos<!DOCTYPE html>
<html lang="es">
<head>
<script src="js/modernizr.js"></script>
<script type="text/javascript">
Modernizr.load({
test: Modernizr.cssgradients ,
nope: ['modernizr/style.css'],
both: ['css/style.css' ]
});
</script>
</head>
<body>
<div class="degradado">Gradientes para todos</div>
</body>
</html>
