No lo digo yo, lo dice Bruce Bowman el Jefe de Producto de Adobe BrowserLab.
Modernizr es una excelente solución para el problema que nos planteabamos. Por si no lo conoces,Modernizr es una librería de Javascript que permite condicionar nuestro código para mostrar unas u otras características HTML5 según la compatibilidad del navegador. Así nuestro código será sólido frente a navegadores antiguos y fácil de “limpiar” cuando no tengamos que preocuparnos de navegadores antiguos.
Para descargar Modernizr entramos en su página oficial y vemos como mediante un formulario podremos seleccionar las diferentes características que podemos controlar. Este es un punto positivo de cara al rendimiento, ya que para cada proyecto podremos generar nuestro archivo .js ajustado a nuestras necesidades ocupando el tamaño mínimo.
Una vez generado, el primer paso es enlazarlo en la cabecera de nuestro documento.
Trabajando con Modernizr
El uso de Modernizr podría dividirse en tres bloques:
La detección de compatibilidad con nuevas etiquetas
La detección de compatibilidad con APIs
La detección de compatibilidad con CSS3
COMPATIBILIDAD CON NUEVAS ETIQUETAS
En el primer caso, Modernizr permite visualizar y dar estilo a las etiquetas propias de HTML5 en navegadores antiguos. Por defecto, IE8 ignorarían las etiquetas header, section, article, aside, nav… y todo lo que contuviesen provocando un completo desastre.
Esto no quiere decir que una etiqueta video empiece a funcionar en navegadores obsoletos, pero al menos, estará creada en el DOM y por tanto será susceptible de recibir estilos.
COMPATIBILIDAD CON APIS
Modernizr te permite crear condiciones sencillas para discriminar si el navegador da soporte o no a cada API de HTML5.
Por ejemplo:
if(Modernizr.svg){
//Cargo mi SVG
}else{
//Cargo un png
}
Es tan simple como genial. Modernizr.svg tendrá el valor true si el navegador tiene compatibilidad con SVG, si no, podemos cargar una mapa de bits mediante la etiqueta img.
Igual podemos controlar el soporte a canvas, geolocation, localstorage y un largo etcétera.
COMPATIBILIDAD CON CSS3
Si tras enlazar nuestro .js añadimos a la etiqueta html la clase ‘no-js‘, modernizr sustituirá esta clase por unas nuevas:
<html class='no-js'>
<!--Lo convierte a un tipo:-->
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths webkit chrome mac js">
¿Para qué te sirve esto? De esta forma puedes discriminar en tu hoja de estilos el soporte del navegador a nuevas características de CSS3.
Por ejemplo, podríamos controlar el uso de rgba:
.rgba .fondonegro50{
background: rgba(0, 0, 0, 0.5);
En resumen
Como desarrolladores y diseñadores web tenemos una responsabilidad hacia el usuario final. Puesto que es prácticamente imposible que usando HTML5 nuestras webs se visualicen y actúen correctamente en navegadores antiguos, con Modernizr podremos al menos diferenciar qué capacidades de cada uno y mostrar en consecuencia un contenido que mantenga una buena experiencia de usuario.
Enlaces de interés
Modernizr: http://modernizr.com/
Dive into HTML5, detección de características:
Modernizr es una excelente solución para el problema que nos planteabamos. Por si no lo conoces,Modernizr es una librería de Javascript que permite condicionar nuestro código para mostrar unas u otras características HTML5 según la compatibilidad del navegador. Así nuestro código será sólido frente a navegadores antiguos y fácil de “limpiar” cuando no tengamos que preocuparnos de navegadores antiguos.
Para descargar Modernizr entramos en su página oficial y vemos como mediante un formulario podremos seleccionar las diferentes características que podemos controlar. Este es un punto positivo de cara al rendimiento, ya que para cada proyecto podremos generar nuestro archivo .js ajustado a nuestras necesidades ocupando el tamaño mínimo.
Una vez generado, el primer paso es enlazarlo en la cabecera de nuestro documento.
Trabajando con Modernizr
El uso de Modernizr podría dividirse en tres bloques:
La detección de compatibilidad con nuevas etiquetas
La detección de compatibilidad con APIs
La detección de compatibilidad con CSS3
COMPATIBILIDAD CON NUEVAS ETIQUETAS
En el primer caso, Modernizr permite visualizar y dar estilo a las etiquetas propias de HTML5 en navegadores antiguos. Por defecto, IE8 ignorarían las etiquetas header, section, article, aside, nav… y todo lo que contuviesen provocando un completo desastre.
Esto no quiere decir que una etiqueta video empiece a funcionar en navegadores obsoletos, pero al menos, estará creada en el DOM y por tanto será susceptible de recibir estilos.
COMPATIBILIDAD CON APIS
Modernizr te permite crear condiciones sencillas para discriminar si el navegador da soporte o no a cada API de HTML5.
Por ejemplo:
if(Modernizr.svg){
//Cargo mi SVG
}else{
//Cargo un png
}
Es tan simple como genial. Modernizr.svg tendrá el valor true si el navegador tiene compatibilidad con SVG, si no, podemos cargar una mapa de bits mediante la etiqueta img.
Igual podemos controlar el soporte a canvas, geolocation, localstorage y un largo etcétera.
COMPATIBILIDAD CON CSS3
Si tras enlazar nuestro .js añadimos a la etiqueta html la clase ‘no-js‘, modernizr sustituirá esta clase por unas nuevas:
<html class='no-js'>
<!--Lo convierte a un tipo:-->
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths webkit chrome mac js">
¿Para qué te sirve esto? De esta forma puedes discriminar en tu hoja de estilos el soporte del navegador a nuevas características de CSS3.
Por ejemplo, podríamos controlar el uso de rgba:
.rgba .fondonegro50{
background: rgba(0, 0, 0, 0.5);
En resumen
Como desarrolladores y diseñadores web tenemos una responsabilidad hacia el usuario final. Puesto que es prácticamente imposible que usando HTML5 nuestras webs se visualicen y actúen correctamente en navegadores antiguos, con Modernizr podremos al menos diferenciar qué capacidades de cada uno y mostrar en consecuencia un contenido que mantenga una buena experiencia de usuario.
Enlaces de interés
Modernizr: http://modernizr.com/
Dive into HTML5, detección de características: