7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Modernizr

Una mirada rápida a Modernizr 3.0

Scroll to top
Read Time: 5 mins

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Los navegadores cada vez más rápido están adoptando nuevas características estándar para la web, pero el hecho sigue siendo que con frecuencia tenemos pocas opciones y debemos proporcionar una alternativa funcional para versiones antiguas de navegadores. En resumen, necesitamos Modernizr.

Modernizr es una librería JavaScript que detecta las características del navegador, luego hace el estado de cada uno disponible para nosotros como una clase adjuntada al elemento html, o una propiedad dentro del objeto JavaScript Modernizr.

Modernizr recientemente recibió algunas actualizaciones importantes, esto es nuevas características, cambios y mejoras. En éste artículo, revisaremos Modernizr, echando una mirada a lo que tiene para ofrecer en la versión 3. ¡Comencemos!

Obteniendo Modernizr

En versiones previas podíamos descargar la compilación de desarrollo (el Modernizr no minificado) así como un paquete personalizado incluyendo solo características seleccionadas y APIs, a través de la página de Descargas. En la versión 3, Modernizr nos permite hacer eso a través de la ILC oficial (Interfaz de Línea de Comandos).

Para ello, primero selecciona las características que requieres de Modernizr. Luego tendrás la opción de descargar un archivo de configuración JSON.

El archivo contiene líneas de configuración que determinan el archivo resultante Modernizr:

Tomado el ejemplo de arriba, nuestra especificación para Modernizr es mínima. El archivo resultante debería ser minificado e incluye solo tres tests de características:

  • el flexbox,
  • el flexboxwrap (un nuevo test desde la versión 3),
  • y la transition.

Éste archivo de configuración es para usarse con la interfaz de línea de comandos de Modernizr. Instala el ILC con NPM con el siguiente comando:

Ahora, tienes acceso al comando modernizr. Ejecuta el comando al apuntar al directorio donde has descargado el archivo de configuración JSON. Por ejemplo, asumiendo que está en el directorio de "Descargas", ingresarías:

El archivo debería ahora haber sido generado y estar listo para desplegarse en tu sitio web.

Un ejemplo del archivo Modernizr generado por medio de la ILC.

Trabajando con Nombres de Clases

Modernizr agrega una pila de clases al elemento html, basado en cualquier característica que estés probando, y añadirá js si JavaScript está habilitado, remplazando la clase no-js si se agregó inicialmente.

La siguiente captura de pantalla muestra la versión más reciente de Chrome al momento de escribir este artículo; las clases agregadas al html nos dicen que Chrome soporta las tres características que hemos incluído en nuestra compilación.

En un navegador que no soportan éstas características, Modernizr agregará un prefijo no- a cada respectiva clase. En IE9, donde ninguna de éstas tres características son soportadas, serían dadas las siguientes clases:

Donde flexbox sea soportado, podrías aplicar estilos como:

Agregando una solución alternativa como:

Prefijos de Clases

En caso de que éstos nombres de clases chocaran con uno o más de tus propios nombres de clases, siempre puedes sugerir un prefijo cuando se descarga el archivo JSON antes de la compilación.

En Modernizr 3, ésta opción es configurable en el archivo JSON bajo el nombre de propiedad classPrefix. Por ejemplo:

Abre Terminal y compila nuevamente el archivo. Deberías ahora ver las clases que tienen el prefijo is-.

JavaScript: Propiedad de Detección de Característica

Cuando se detecta una caracteristica del navegador con versiones previas de Modernizr, digamos flexbox, típicamente escribiríamos:

Había pocas excepciones, donde las propiedades incluían guiones o espacios, como display: table, display: run-in, exif-orientation etc. En éstos casos tendríamos que escribir el test de ésta forma:

En la versión 3, todos los nombres de la propiedad detección de característica tienen una sola palabra, sin espacios, o guiones. Ésto nos permite ser más consistentes en nuestro código. Tomando el ejemplo de arriba, podemos ahora probar el exif-orientation de la misma forma que probamos la característica flexbox así:

Éste cambio también afecta los nombres de clases agregadas al html. Si observamos nuestro DOM a través de las Herramientas para el Desarrollador, ahora encontraremos que el nombre de clase exif-orientation no tiene guion. Si has usado alguna convención de nomenclatura de clase antigua, no te preocupes. Clases que se presumen ser más utilizadas han sido proporcionadas con un alias para retro-compatibilidad. Verás el display-table y object-fit, por ejemplo, son nombradas con el guión y sin el guión.

Nuevos Métodos de Testeo

Algunos testeos de características son ejecutados asíncronamente lo que puede causar un problema de desfase de tiempo, evitando resultados óptimos. Por lo tanto, cuando ejecutas el siguiente test para nuevo formato de imagen webp, por ejemplo, Modernizr regresará undefined en lugar de true o false.

Pudiendo obtener resultados de test asíncronos era una de las características más solicitadas, así que (afortunadamente) la versión 3 ahora el método Modernizr.on() es proporcionado. El siguiente test ahora debería regresar correctamente.

Ten en cuenta que el método Modernizr.on() es generalmente aplicable a todas los test de características, pero es aconsejable usarlo solo para características asíncronas, incluyendo:

  • webp
  • apng (PNG Animado)
  • jpeg-xr
  • dataworkers
  • blobworkers
  • exif-orientation
  • csshyphens
  • flash
  • data-uri

Una Nota sobre YepNope

El desarrollo de YepNode ha sido descontinuado en favor de mejores cargadores de script y gestores de dependencias como Require.js. Previamente, en Modernizr 2, podrías ejecutar el método Modernizr.load() para cargar archivos JavaScript basados en la retroalimentación del testeo de característica.

Sin embargo, desde que YepNope ha sido descontinuado, este método ha sido abanonado en Modernizr 3. El Modernizr.load() ya no es aplicable. Asi que, evalúa tu código de versiones anteriores para instancias de este método si planeas actualizar a la versión 3.

Concluyendo

Modernizr ha sido por mucho tiempo uno de las librerías que he usado para cualquier proyecto, asi que estoy emocionado al ver todas esas actualizaciones. Modernizr 3 ha sido reconstruído efectivamente desde abajo, y con unas 99 nuevos testeos de características ¡los cambios son abrumantes! Sigue los pasos en ésta guía, ajusta tu propia compilación, luego revisa éstas referencias para conocer más.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.