Los exploradores antiguos se niegan a desaparecer, haciendo difícil el encorporar las últimas características de HTML5 y CSS3 en nuestros sitios web. Ahí es donde Modernizr, una librería open-source de JavaScript puede ayudar al detectar qué características soporta un explorador. Modernizr no intenta agregar esas características faltantes, pero sí permite adaptar el diseño de tu página creando reglas de estilo alternativas para los exploradores antiguos. También te permite cargar scripts personalizados para emular la funcionalidad faltante.

Utilizar Modernizr es sencillo, aunque no es una varita mágica. El éxito al trabajar con él dependerá mayormente de tus habilidades con CSS y JavaScript. En este tutorial, aprenderás cómo aplicar estilos alternativos en exploradores que no soportan múltiples columnas o sombras. Tambien aprenderas como lograr que navegadores antiguos puedan validar formularios que hacen uso del nuevo atributo de HTML5 required, así como cargar scripts condicionalmente dependiendo de las capacidades del navegador.

¿Que es Modernizr?

Modernizr es una librería de JavaScript que detecta cuáles características soporta un explorador. Actualmente revisa 18 características de CSS3 y más de 40 relacionadas con HTML5, examinando cómo responde el explorador a una serie de pruebas. El conjunto completo de pruebas toma solo microsegundos en realizarse. Y para obtener todavía un mejor desempeño, el sitio web de Modernizr maximiza su eficiencia automatizando la creación de un script personalizado para probar solo aquellos elementos en los que estás interesado.

Cuando se utiliza para detectar el soporte de CSS3, Modernizr no requiere conocimientos de JavaScript. Simplemente adjunta el archivo a tu página web, y dinámicamente agregará el conjunto de clases al elemento html dependiendo de las capacidades del navegador. Los nombres de las clases están estandarizados y son autoexplicativos. Por ejemplo, la clase boxshadow se agrega si el navegador soporta la propiedad box-shadow; de lo contrario no-boxshadow se agrega en su lugar. Todo lo que necesitas es crear una hoja de estilos que use estas clases para brindar los estilos apropiados al explorador.

Modernizr hace fácil la implementación de soluciones JavaScript conocidas como polyfills que emulan características relacionadas a HTML5 y tecnologías asociadas, como la geolocalización. Sin embargo, necesitas al menos un entendimiento básico de de JavaScript para usarlas. Por cierto, el término polyfill viene de Polyfilla, el nombre de la marca inglesa de una pasta para reparar grietas. La idea es que un polyfill tape un agujero en la capacidad del navegador. A veces, realiza la tarea sin problemas pero es básicamente un trabajo de reparación, así que no se puede confiar en que produzca exactamente siempre los mismos resultados.

Descargando Modernizr

En común con otras librerías de JavaScript, Modernizr esta disponible en versiones de desarrollo y producción. Con la mayoría de las librerías la única diferencia es que los espacios en blanco y los comentarios han sido removidos de la versión de producción para reducir el peso de la descarga, Modernizr toma un enfoque diferente. La versión de desarrollo contiene casi todo, mientras que la versión de producción contiene únicamente aquellos elementos de tu elección, resultando en una descarga considerablemente más pequeña.

Cuando experimentes con Modernizr, recomendamos que descargues la versión de desarrollo. Una vez que sepas como funciona y de lo que es capaz, puedes descargar una version de produccion personalizada para implementarla en tu sitio web.

Los archivos de ejemplo de este tutorial contienen la versión 2.0.6 de la versión de desarrollo de Modernizr, pero te recomiendo reemplazarla con la versión más actualizada del sitio de Modernizr.

1. Descarga los archivos de ejemplo que acompañan este articulo (using_modernizr.zip) y descomprimelos en un lugar conveniente dentro de un sitio de Dreamweaver, o crea un nuevo sitio para este tutorial.
2. Ve al sitio de Modernizr en http://www.modernizr.com
3. En la sección de descarga de Modernizr 2, da clic en el boton Desarrollo (ver imagen). La versión de desarrollo de Modernizr se abre directamente en la ventana de tu explorador.
4. En el menú principal de tu explorador, selecciona Save Page As, y guardala como modernizr.js en el folder js de los archivos de ejemplo, reemplazando el archivo actual si es necesario.

Uso de Modernizr para detectar características CSS

Como se mencionó anteriormente, Modernizr no intenta agregar nuevas características a los exploradores antiguos, pero permite compensar la falta de características con tus estilos. Para demostrar cómo trabaja, los archivos de ejemplo contienen una pagina llamada css_support_begin.html. Si cargas la página en un explorador moderno, debería verse como a continuación:

Los estilos en la pagina usan las propiedades column-count y box-shadow de CSS3 para visualizar el texto en múltiples columnas y agrega una sombra a la imagen. Los exploradores antiguos no soportan ninguna de estas propiedades, así que la misma página se ve asi en Internet Explorer 7:

En IE 9, la misma página se visualiza con la sombra en la imagen, pero el texto está posicionado de la misma forma que en la imagen anterior.

Hasta donde llegar intentando compensar por la falta de características disponibles depende de los requerimientos de tu diseño. Intentar lograr que la página luzca igual en todos los navegadores involucra mucho trabajo, pero puedes hacer algunas mejoras sencillas, como envolver el texto alrededor de la imagen, alineando la imagen con el margen izquierdo del texto, y agregando un borde sutil a las esquinas derecha e inferior para darle un look más tridimensional.

Detectando el soporte de las características de CSS3

Modernizr usa JavaScript para detectar cuáles características soporta el explorador, pero antes de usar JavaScript para cargar diferentes hojas de estilo dinámicamente, usa la técnica extraordinariamente simple de agregar clases a las etiquetas html de las páginas. Es entonces cuando depende de ti como diseñador el usar la hoja de estilos CSS para servir apropiadamente los estilos a los elementos. Por ejemplo, si se soporta la propiedad box-shadow, Modernizr agrega la clase boxshadow. Si no es soportada esta propiedad, agrega la clase no-boxshadow en su lugar.

Ya que los exploradores ignoran las propiedades CSS que no reconocen, puedes utilizar con seguridad la propiedad box-shadow en tu regla de estilos básica, pero agregar un selector descendiente separado para exploradores antiguos como este:

Solo los exploradores que no soportan box-shadow tendrán la clase no-boxshadow, asi que ningun otro explorador aplicará esta regla.

Agreguemos Modernizr a la página de ejemplo e inspeccionemos las clases que agrega a la etiqueta html

1. Haz una copia de css_support_begin.html y guardarlo como css_support.html
2. Abre la copia que acabas de crear, y cambia a vista de código o a la vista dividida.
3. Las primeras dos líneas del formato HTML lucen así:
XHTML

<!DOCTYPE HTML> <html>

1 2	<!DOCTYPE HTML> <html>

4. Agrega class=”no-js” a la etiqueta de esta manera:
   
   XHTML

   <!DOCTYPE HTML> <html class="no-js">

   1 2	<!DOCTYPE HTML> <html class="no-js">

   
   Modernizr depende de que JavaScript esté habilitado en el explorador. Cuando así es, esta clase es removida dinámicamente. Sin embargo, en los raros casos en que JavaScript está deshabilitado, permanece en el formato HTML, permitiendote crear reglas de estilo especiales para los visitantes si es necesario.
5. Los estilos en css_support.html son embebidos en un bloque style. La librería de Modernizr necesita ser agregada a la etiqueta de la página después de que se han cargado los estilos. Agrega una nueva línea entre las etiquetas style y head de cierre y agrega modernizr.js usando una etiqueta script. La forma más sencilla es escribir el codigo por ti mismo, pero también puedes usar el boton Script en el panel de inserción o seleccionar Insert > HTML > Script Objects > Script. Las últimas tres líneas del head debería verse así:
   
   XHTML

   </style> <script src="js/modernizr.js"></script> </head>

   1 2 3

   </style> <script src="js/modernizr.js"></script> </head>

   
   Nota: Si usas el panel de inserción o el menú de inserción, Dreamweaver agrega type=”text/javascript” a la etiqueta de apertura script. Esto ya no es requerido en HTML5, pero no hace daño dejarlo.
6. Guarda support_css.html y da clic al boton Live Code en la barra del documento. La etiqueta html ahora está poblada con más de 40 nombres de clases indicando las capacidades de la versión del motor de búsqueda WebKit que esta construido dentro de Dreamweaver.

Nota: Si tu versión de Dreamweaver no tiene Live Code (o si estas usando un editor de HTML diferente), puedes inspeccionar el código generado usando las herramientas de desarrollador en muchos exploradores modernos o con Firebug en Firefox.

Como muestra la imagen anterior, la clase no-js ha sido reemplazada por js, indicando que JavaScript está habilitado. La siguiente tabla lista los nombres de las clases utilizados por Modernizr para indicar el soporte para CSS3. Si la característica no está soportada el nombre de la clase tiene el prefijo no-.

Características de CSS3 detectadas por Modernizr

CSS Feature	Modernizr class (property)
@font-face	fontface
::before and ::after pseudo-elements	generatedcontent
background-size	backgroundsize
border-image	borderimage
border-radius	borderradius
box-shadow	boxshadow
CSS animations	cssanimations
CSS 2D transformations	csstransforms
CSS 3D transformations	csstransforms3d
CSS transitions	csstransitions
flexible box layout	flexbox
gradients	cssgradients
hsla()	hsla
multi-column layout	csscolumns
multiple backgrounds	multiplebgs
opacity	opacity
reflection	cssreflections
rgba()	rgba
text-shadow	textshadow

Donde se prueba una propiedad específica de CSS, el nombre de la clase es el mismo de la propiedad, solo se le remueve cualquier guión o paréntesis que contenga el nombre de la propiedad. Otras clases son nombradas después del módulo CSS3 al que se refieren.

Creando una regla de estilos para exploradores antiguos

Mira la tabla de arriba, puedes ver que Modernizr usa boxshadow y csscolumns para indicar el soporte para la propiedad box-shadow y el layout de multiples columnas respectivamente. Así que puedes crear reglas de estilo especiales usando las clases no-boxshadow y no-csscolumns para exploradores que no soportan estas características.

Para mantener sencillas las instrucciones, te mostrare solo las declaraciones de CSS. También puedes escribirlas directamente en la vista de código o usar la caja de diálogo para una nueva regla de CSS.

1. Crea un nuevo selector descendiente (compuesto) para .no-boxshadow img
2. Coloca los bordes derecho e inferior a 2 pixeles y de color gris sólido (yo escogí #8A8A8A). La regla de estilos resultante debería verse así:
   CSS

   .no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }

   1 2 3 4

   .no-boxshadow img {    border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }

   Esto no es tan atractivo como una sombra traslúcida, pero sin embargo ayuda a que la imagen se destaque ligeramente del fondo.

3. En los exploradores que no soportan el layout multi-columnas, necesitaras alinear la imagen y ajustar sus márgenes. Crea un nuevo selector descendiente para .no-csscolumns img
4. Coloca la imagen hacia la izquierda (float left), y dale márgenes superior e inferior de 3px, un margen derecho de 8px, y un margen izquierdo de cero. La declaración del estilo debería verse así:
   CSS

   .no-csscolumns img margin: 3px 8px 3px 0; float: left; }

   1 2 3 4

   .no-csscolumns img margin: 3px 8px 3px 0; float: left; }

5. Asegúrate de que esta regla de estilos va después de la regla .columns img. Ambas reglas tienen la misma especificidad, así que el margen izquierdo de 10 pixeles en .columns img deberia sobreescribir la regla que acabas de crear si se encuentran en orden opuesto. Podrías renombrar .no-csscolumns img a .no-csscolumns .columns img para darle una especificidad mayor, pero es mejor mantener los selectores lo más simples posible. (Por cierto, si no estás seguro acerca de lo que es la especificidad, revisa el artículo Comprendiendo la Especificidad de Adrian Senior. Es viejo, pero muy útil.)
6. Guarda css_support.html, y pruebalo en un explorador moderno. Debería verse exactamente como antes.
7. Prueba la página en un antiguo explorador ya sea de manera local en tu sistema o conectandote a BrowserLab. No hay sombras o columnas, pero la pagina ahora esta aceptablemente estilizada.

En este ejemplo, únicamente he utilizado las clases con el prefijo no- para crear estilos especiales para exploradores antiguos. Sin embargo, no hay razón en absoluto por la cual no deberías usar ambas clases (con y sin prefijo) para servir diferentes prefijos a los exploradores de acuerdo a sus capacidades. Por ejemplo:

A veces este enfoque está justificado, por ejemplo, si quieres crear un layout completamente diferente para cada nivel de soporte. Pero si se trata simplemente de una cuestión de ofrecer estilos alternativos para exploradores antiguos, no olvides que los exploradores ignoran las propiedades que no reconocen. Si usas las clases de Modernizr para todos los estilos, tu página se verá totalmente sin estilos en los exploradores que tengan JavaScript deshabilitado.

Usando Modernizr para detectar el soporte de HTML5

Los nombres de las clases que Modernizr agrega a la etiqueta de apertura de sirven para un doble propósito. También son los nombres de las propiedades de JavaScript que el objeto Modernizr crea cuando se carga la página. La siguiente tabla lista las clases y propiedades relacionadas a HTML5 y tecnologías relacionadas, como la geolocalización.

Características relacionadas con HTML5 detectadas por Modernizr

HTML5-related features	Modernizr property (class)
Application cache	applicationcache
Audio	audio.type (ogg, mp3, wav, m4a)
Canvas	canvas
Canvas text	canvastext
Drag and drop	draganddrop
Form input attributes	input.attributeName
Form input elements	inputtypes.elementName
Geolocation	geolocation
hashchange event	hashchange
History management	history
IndexedDB	indexeddb
Inline SVG	inlinesvg
Local storage	localstorage
Messaging	postmessage
Session storage	sessionstorage
SMIL	smil
SVG	svg
SVG clip paths	svgclippaths
Touch events	touch
Video	video.type (ogg, webm, h264)
WebGL	webgl
Web sockets	websockets
Web SQL database	websqldatabase
Web workers	webworkers

En muchos casos, todas las propiedades en las tablas (de características CSS y HTML5) retornan un true o false. Así que puedes probar el almacenamiento local con JavaScript de esta manera:

Sin embargo, en el caso de audio y video, el valor de retorno es una cadena que indica el nivel de confianza de que el explorador pueda ejecutar el tipo especificado. De acuerdo a la especificación de HTML5, una cadena vacía significa que no se soporta el tipo. Si se soporta el tipo, el valor es “maybe” o “probably”. Por ejemplo:

Usando Modernizr para validar los campos HTML5 form requeridos

HTMl5 agrega muchos atributos nuevos a los forms, como un autofocus, el cual automáticamente pone en foco el campo especificado cuando se carga la página. Otro atributo útil es required, el cual previene que los exploradores compatibles con HTML5 envíen los datos de un form cuando un campo requerido esta en blanco.

Esto es genial, pero te deja con el problema de que hacer respecto a los exploradores antiguos. Una solución es ignorarlos, y dejar al final la validación del lado del servidor. Una forma más amigable al usuario de manejar la situación es crear un pequeño script para revisar los campos requeridos si el explorador no reconoce el atributo required.

1. Haz una copia de required_start.html en los archivos de ejemplo, y guardalo como required.html
2. Adjunta modernizr.js a la página utilizando un bloque de script justo antes del cierre head como se hizo anteriormente.
3. Crea un bloque script separado inmediatamente después del cierre de la etiqueta que enlaza la librería de Modernizr a la página, y crea un event handler para ejecutar el código tan pronto se termina de cargar la página:
   
   XHTML

   <script src="js/modernizr.js"></script> <script> window.onload = function() { //codigo para ejecutar cuando se carga la pagina }; </script> </head>

   1 2 3 4 5 6 7

   <script src="js/modernizr.js"></script> <script> window.onload = function() { //codigo para ejecutar cuando se carga la pagina }; </script> </head>

4. El event handler necesita obtener una referencia de los elementos form y emular los atributos autofocus y required en exploradores que no los reconocen. Lidiar con autofocus es fácil:
   
   JavaScript

   window.onload = function() { // obtiene el form y sus elementos input var form = document.forms[0], inputs = form.elements; // Si no soporta autofocus, pone el foco en el primer campo if (!Modernizr.input.autofocus) { inputs[0].focus(); } // Si no soporta required, lo emula }

   1 2 3 4 5 6 7 8 9 10

   window.onload = function() { // obtiene el form y sus elementos input var form = document.forms[0], inputs = form.elements; // Si no soporta autofocus, pone el foco en el primer campo if (!Modernizr.input.autofocus) { inputs[0].focus(); } // Si no soporta required, lo emula }

   
   La condición prueba Modernizr.input.autofocus, el cual retorna false si no se soporta autofocus. Sin embargo, el operador lógico NO (el signo de exclamación) revierte el significado, así que si no se soporta autofocus, la condición evalúa a true, y con input[0].focus() coloca el foco en el primer campo input.
5. Ahora agrega el código para revisar si no se soporta required. El código completo para el event handler se ve así:
   
   JavaScript

   window.onload = function() { // obtiene el form y sus elementos input var form = document.forms[0], inputs = form.elements; // Si no soporta autofocus, pone el foco en el primer campo if (!Modernizr.input.autofocus) { inputs[0].focus(); } // Si no soporta required, lo emula if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // ciclo con el cual se busca la propiedad required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // si se encuentra required, obtiene el valor del campo y elimina los espacios en blanco if (att != null) { val = inputs[i].value; // Si el campo esta vacio, lo agrega al arreglo required if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // muestra una alerta si el arreglo required contiene algun elemento if (required.length > 0) { alert('Los siguientes campos son requeridos: ' + required.join(', ')); // previene que se envie el form return false; } }; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

   window.onload = function() { // obtiene el form y sus elementos input var form = document.forms[0], inputs = form.elements; // Si no soporta autofocus, pone el foco en el primer campo if (!Modernizr.input.autofocus) { inputs[0].focus(); } // Si no soporta required, lo emula if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // ciclo con el cual se busca la propiedad required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // si se encuentra required, obtiene el valor del campo y elimina los espacios en blanco if (att != null) { val = inputs[i].value; // Si el campo esta vacio, lo agrega al arreglo required if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // muestra una alerta si el arreglo required contiene algun elemento if (required.length > 0) { alert('Los siguientes campos son requeridos: ' + required.join(', ')); // previene que se envie el form return false; } }; } }

   
   El nuevo código crea una función que usa un ciclo con todos los elementos input del form cuando se intenta enviar los datos, busca los campos con el atributo required. Cuando encuentra una, retira los espacios al principio y al final del valor, si el resultado es una cadena vacía, agrega el campo al arreglo required. Si el arreglo contiene algún elemento después de que se revisaron todos los campos, el explorador mostrará una alerta con los nombres de los campos faltantes, y previene que se envíen los datos del form.
6. Guarda required.html y cargalo en un explorador, como IE del 6 al 9, que no tiene soporte para forms de HTML5. Notaras como automáticamente se coloca el foco en el primer campo.
7. Da clic al boton submit sin haber completado ninguno de los campos. Deberías ver una alerta avisando que los campos name y email son requeridos.

   

8. Prueba la página de nuevo pero completando un campo requerido. Cuando des clic a OK para cerrar la alerta, el campo que completaste aun tiene su contenido, indicando que el form no ha sido enviado.
9. Completa ambos campos requeridos, y da clic al boton submit. Esta ocasión, los campos se limpian, y deberías poder ver los datos adjuntos a la URL como una cadena de búsqueda en la barra de dirección del explorador.
10. Prueba la página en un explorador compatible con HTML5, como la última versión de Firefox, Chrome u Opera. En vez de mostrar la alerta, el explorador muestra sus propios mensajes de error.

Creando una versión de producción

Cuando estás listo para desplegar tu sitio, se recomienda crear una versión de producción personalizada de Modernizr, que contenga sólo aquellos elementos que realmente necesitas. Esto puede reducir el peso de la librería de Modernizr desde 44KB a algo tan poco como 2KB, dependiendo de cuáles características elijas.

Las opciones se agrupan convenientemente en categorías: CSS3, HTML5, Misceláneos y Extras. Dando click puedes seleccionar o deseleccionar las características.
Por defecto, los siguientes elementos se encuentran seleccionados en la categoría de Extras:

• HTML5 Shim/IEPP: Agrega dos scripts que fuerzan a IE del 6 al 8 a estilizar y mostrar los elementos HTML5 correctamente. Solo la necesitaras si tu plan es usar las nuevas etiquetas semánticas de HTML5, como header, footer, nav, y las demás.
• Modernizr.load(yepnope.js): Agrega un script cargador opcional, el cual no esta incluido en la versión de desarrollo. Agrega 3KB al peso de la descarga, asi que debes deseleccionarlo si no lo necesitas. Más adelante describiré su uso.
• Agregar clases CSS: Incluye las clases de Modernizr para la etiqueta de apertura . Debes seleccionar esta opción si quieres detectar el soporte de las características de CSS3.

Si seleccionas cualquier opción en la categoría de CSS3, también se seleccionarán las siguientes opciones en la categoría de extras:

• Modernizr.testProp()
• Modernizr.testAllProps()
• Modernizr._domPrefixes()

No deselecciones estas opciones. Al hacerlo, automáticamente deseleccionaras cualquier opción que hayas seleccionado de la categoría de CSS3.

MQ Polyfill(respond.js) en la categoría de Extras, agrega un script que te permite soporte limitado para media queries en IE del 6 al 8. Cuando lo seleccionas, automáticamente se seleccionan Media Queries y Modernizr.testStyles(). Para aprender más acerca del polyfill(respond.js) de media queries, visita https://github.com/scottjehl/Respond Las opciones restantes en la categoría Extras son únicamente para usuarios avanzados. Para más detalles de qué son y cómo usarlas, revisa la sección de Extensibilidad en la documentación de Modernizr.

Usando Modernizr para cargar scripts externos

Cuando se crea una versión de producción personalizada de Modernizr, la opción Modernizr.load() esta seleccionada por default. Modernizr.load() es un alias para yepnope(), un script independiente para cargar que fue desarrollado con Modernizr en mente. Para mostrar un ejemplo sencillo de como usarlo, movi el script de required.html a check_required.js e hice tres pequeños cambios para remover las pruebas Modernize y asignarlo a una variable llamada init. El script es este:

Una gran ventaja de Modernizr.load() es que carga condicionalmente los script dependiendo del resultado de la prueba de las capacidades del explorador, por lo cual se llama originalmente yepnope.js. Carga los scripts externos de forma asíncrona; en otras palabras, después de que el Document Object Model (DOM) ha cargado en el explorador;asi que puede ayudar a acelerar el rendimiento de tu sitio.

La sintaxis básica de Modernizr.load() es pasarle un objeto con las siguientes propiedades:

• test: La propiedad que quieres que Modernizr pruebe.
• yep: La locación del script que quieres cargar si la prueba es exitosa. Usa un arreglo para varios scripts.
• nope: La locación del script que quieres cargar si la prueba falla. Usa un arreglo para varios scripts.
  complete: Una función a ser ejecutada tan pronto como se ha cargado el script externo (es opcional).

Ambas yep y nope son opcionales, siempre que proporciones una de ellas.

Para cargar y ejecutar el script check_required.js, agrega el siguiente bloque script despues de donde se agregó modernizr.adc.js (el codigo esta en required_load.html):

Trabaja exactamente como antes, pero reduce la carga de descarga en los exploradores que soportan el atributo required.
Para probar múltiples condiciones, le puedes pasar un arreglo de objetos a Modernizr.load(). Para más detalles ve el tutorial de Modernizr.load() en la documentación de Modernizr.

Precaución

Modernizr es una herramienta muy poderosa y útil, pero eso no significa necesariamente que deberías usarla. No siempre es necesario usar Modernizr para brindar estilos alternativos a los exploradores. Si tu principal preocupación es Internet Explorer, considera utilizar comentarios condicionales para IE. También puedes usar la CSS para sobreescribir algunos estilos. Por ejemplo, usar primero un color hexadecimal y entonces con sobreescribirlo con un rgba() o hsla(). Los exploradores antiguos aun usar el primer valor e ignoran el segundo.

Modernizr realmente entra en el juego cuando se combina con polyfills y otro JavaScript. Pero recuerda que a menudo es muy sencillo crear tu propia prueba para las características soportadas. Por ejemplo, el siguiente código es lo único que requieres para probar si un explorador soporta el atributo required (el codigo esta en required_nomodernizr.html):

A donde ir desde aquí

Este tutorial ha cubierto todas las principales características de Modernizr. Para aprender mas acerca de estas caracteristicas, estudia la documentacion oficial en http://www.modernizr.com/docs/. Además puedes encontrar útiles los siguientes recursos:

yepnopejs.com brinda una covertura profunda de yepnope(), la cual esta incorporada en Modernizr como Modernizr.load().
Tomando Ventaja de HTML5 y CSS3 con Modernizr, de Faruk Ate? (Líder del Proyecto Modernizr). Aunque esta basado en una versión anterior de Modernizr, este artículo contiene un ejemplo detallado de la mejora progresiva a través de Modernizr y CSS3.

La versión original de este artículo está publicada en Adobe Devnet bajo licencia Creative Commons, fue traducido y adaptado en nuestro blog por Jesús Pablo Macedo.