Dada la controversia actual entre si mi navegador soporta o no las nuevas características de de CSS3, y basado en mi experiencia generada por hacer un sitio "lindo" con estas nuevas tecnologías me di a la tarea de investigar como hacer para que todos los navegadores tengan soporte con los gradientes CSS3, lo cual @freddier y @cvander en uno de sus vídeos mencionas como hacer compatible nuestra web con cualquier navegador y mencionan "modernizr.js" una librería que nos ayudara en este ejemplo.
¿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:
<script src="js/modernizr.js"></script>
Modernizr.js agrega en este caso la clase cssgradientst a nuestra etiqueta <html> de manera automática si este tiene soporte.
Código:
<html lang="es" class="cssgradients">
Este que es el mejor de los casos solo deberíamos de cargar nuestra hoja de estilos con nuestros degrados.
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:
<script type="text/javascript">
Modernizr.load({
test: Modernizr.cssgradients ,
nope: ['modernizr/style.css'],
both: ['css/style.css' ]
});
</script>
test:// verifica si el navegador tiene soporte con dicha clase
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:
.degradado {
background: #a37b50;
-pie-background: linear-gradient(#a37b50, #2b1300);
behavior: url(modernizr/PIE.php);
}
El archivo PIE.php hace referencia a el archivo PIE.htc recomiendo cargar el archivo php para no modificar el .htaccess del servidor.
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:
.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);
}
y ahora implementamos lo hecho hasta ahora
Código:
<div class="degradado">Gradientes para todos</div>
y final mente nos queda algo asi:
Código:
<!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>
Espero les aya servido de algo. Excelente día para todos
