Detectar compatibilidad css3 con Modernizr
Actualmente la mayoría de los navegadores aceptan css3 pero puede suceder que el usuario no lo tenga actualizado por lo que los estilos css3 definidos no se verían de forma correcta. Cabe destacar que Modernizr no volverá al navegador compatible con estos estilos pero si ayudará para definir reglas css alternativas.
Haremos una pequeña practica para que se vea mas claro. En el ejemplo verás que se genera una caja de 960px de ancho por 100px de ancho con un color de letra blanco, esta caja tendrá de fondo un degradado de azul a verde.
Para conseguir este degradado se usara el siguiente estilo:
background: -moz-linear-gradient(top, #65b6cf , #A7CC35);
background: -webkit-gradient(linear, 00, 0100%, from(#65b6cf), to(#A7CC35));
Para los navegadores antiguos que no soportan esta propiedad se mostrará una imagen por medio del estilo:
background: url(‘fondo-degradado.jpg’);
Al principio incluimos la libreria Modernizr esta (entre otras cosas) detecta si el navegador es compatible con css3 y agrega unas clases en la etiqueta body. En el ejemplo, si el navegador es compatible con los degradados Modernizr agrega al body la clase .cssgradients con lo que podremos seleccionar y definir estilos para cada caso (que sea o no compatible). En el ejemplo, a la caja se le define class=”caja-texto” entonces los estilos quedan así:
.no-cssgradients .caja-texto {
width: 960px;
height: 100px;
color: #fff;
background: url(‘fondo-degradado.jpg’);
}
.cssgradients .caja-texto {
width: 960px;
height: 100px;
color: #fff;
background: -moz-linear-gradient(top, #65b6cf , #A7CC35);
background: -webkit-gradient(linear, 00, 0100%, from(#65b6cf), to(#A7CC35));
}
Primero defino los estilos para la caja en caso que no se detecte soporte para gradiente lo cual se identifica por medio de la etiqueta de clase .no-cssgradients en el cual el degradado del fondo es dado por una imagen. Después se dan los estilos en caso que si se tenga soporte lo cual nos lo marca la etiqueta de clase .cssgradients en el cual se incluye el degradado siempre con sus prefijos (-moz , -webkit).
De esta manera se logra que cuando la pagina sea vista con un navegador con soporte para degradados se activen los estilos gradient sin necesidad de usar una imagen y en el caso de no ser soportado el navegador recibirá una imagen logrando así que el sitio no pierda presentación.