HTML - Modernizador

Mateo G. - July 19, 2024

Cómo empezar

Para comenzar a usar Modernizr en tu proyecto, necesitas incluir la biblioteca Modernizr en tu archivo HTML. Hay dos formas principales de hacerlo: descargar Modernizr e incluirlo en tu proyecto o usar una Red de Distribución de Contenidos (CDN).

Descargar Modernizr es sencillo. Visita el sitio web oficial de Modernizr (https://modernizr.com/) y haz clic en el botón "Download". Puedes elegir entre la versión de desarrollo, que incluye comentarios y no está minificada, o la versión de producción, que está minificada para un mejor rendimiento. Una vez descargado, coloca el archivo JavaScript de Modernizr en el directorio de tu proyecto e inclúyelo en tu archivo HTML usando la etiqueta <script>, preferiblemente en la sección <head>:

Consejo: Incluir Modernizr usando el archivo descargado

<head>
  <script src="ruta/hacia/modernizr.js"></script>
</head>

Usar una CDN es otra forma de incluir Modernizr en tu proyecto. Puedes usar la CDN cdnjs agregando esta etiqueta <script> a tu archivo HTML:

Consejo: Incluir Modernizr usando CDN

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>

Asegúrate de reemplazar 2.8.3 con la versión de Modernizr que quieras usar. Usar una CDN tiene tiempos de carga más rápidos ya que el navegador del usuario puede haberla almacenado en caché de otros sitios web.

Una vez que hayas incluido Modernizr en tu proyecto, puedes comenzar a usar sus capacidades de detección de características para comprobar las funciones de HTML5 y CSS3 y cargar polyfills y alternativas cuando sea necesario.

Detección de características

La detección de características es una técnica utilizada para verificar si un navegador admite una función o funcionalidad específica. Permite escribir código condicional que ejecuta diferentes rutas según la presencia o ausencia de una característica. Modernizr es una biblioteca que simplifica la detección de características para HTML5 y CSS3.

Con Modernizr, puedes detectar el soporte de varias características de HTML5 y CSS3. Agrega clases al elemento <html> indicando qué características son compatibles con el navegador.

Consejo: Uso de Modernizr con HTML5 y CSS3

<p>Si el navegador admite el elemento <canvas> de HTML5, Modernizr agregará la clase canvas al elemento <html>. Si no, agrega la clase no-canvas en su lugar.</p>

Puedes usar estas clases para aplicar diferentes estilos o comportamientos basados en el soporte de características en tu CSS:

Consejo: Aplicación de diferentes estilos según el soporte de características

.canvas {
  /* Estilos para navegadores que admiten canvas */
}

.no-canvas {
  /* Estilos alternativos para navegadores que no admiten canvas */
}

En tu código JavaScript, puedes usar Modernizr para verificar el soporte de características de forma programática:

Consejo: Verificación del soporte de características en JavaScript

if (Modernizr.canvas) {
  // Código para navegadores que admiten canvas
} else {
  // Código alternativo para navegadores que no admiten canvas
}

Modernizr también proporciona un método llamado Modernizr.testAllProps() que te permite probar múltiples propiedades CSS a la vez. Toma el nombre de una propiedad como primer argumento y un valor opcional como segundo argumento. Devuelve true si el navegador admite la propiedad con el valor especificado:

Consejo: Uso del método Modernizr.testAllProps

if (Modernizr.testAllProps('background', 'linear-gradient(to bottom, #000, #fff)')) {
  // Código para navegadores que admiten gradientes lineales
} else {
  // Código alternativo para navegadores que no admiten gradientes lineales
}

Al usar las capacidades de detección de características de Modernizr, puedes escribir código inteligente y adaptable que maneja diferentes niveles de soporte de navegadores de manera elegante. Esto te permite usar características modernas de HTML5 y CSS3 mientras proporcionas alternativas para navegadores más antiguos.

Carga Condicional

La carga condicional es una técnica utilizada para cargar recursos específicos, como polyfills o alternativas, según si un navegador admite una función particular. Con Modernizr, puedes usar la carga condicional para cargar recursos solo cuando sea necesario, mejorando el rendimiento y reduciendo las descargas innecesarias.

Los polyfills son scripts que imitan el comportamiento de funciones modernas en navegadores antiguos que no las admiten de forma nativa. Las alternativas son soluciones o estilos alternativos utilizados cuando un navegador no admite una función particular. Modernizr te permite cargar polyfills y alternativas de manera condicional basándose en los resultados de la detección de características.

Para usar la carga condicional con Modernizr, puedes utilizar el método Modernizr.load(). Este método acepta un objeto o un array de objetos como argumento. Cada objeto representa un recurso que se cargará y las condiciones bajo las cuales debe cargarse.

Consejo: Ejemplo: Carga condicional usando Modernizr.load()

Modernizr.load({
  test: Modernizr.classlist,
  nope: 'classList.js', // Polyfill para classList
});

La propiedad test especifica la característica a probar, en este caso, Modernizr.classlist. Si el navegador no admite la API classList, se cargará el archivo polyfill classList.js usando la propiedad nope.

También puedes usar Modernizr.load() para cargar diferentes recursos basados en múltiples pruebas de características:

Consejo: Ejemplo: Carga condicional basada en múltiples pruebas de características

Modernizr.load([
  {
    test: Modernizr.geolocation,
    yep: 'geolocation.js', // Script para usar geolocalización
    nope: 'geolocation-fallback.js' // Script alternativo
  },
  {
    test: Modernizr.localstorage,
    yep: 'localstorage-feature.js', // Script para usar almacenamiento local
    nope: 'localstorage-fallback.js' // Script alternativo
  }
]);

Las múltiples pruebas de características se especifican en un array. Si el navegador admite geolocalización, se cargará el script geolocation.js. Si no, se cargará el script geolocation-fallback.js en su lugar. De manera similar, si el navegador admite almacenamiento local, se cargará el script localstorage-feature.js; de lo contrario, se cargará el script localstorage-fallback.js.

La carga condicional con Modernizr te ayuda a cargar recursos de manera selectiva según las capacidades de tu navegador. Esto te permite proporcionar una experiencia personalizada mientras optimizas el rendimiento al cargar solo los recursos necesarios.

Personalizando Modernizr

Modernizr permite crear versiones personalizadas para las necesidades de tu proyecto. Por defecto, Modernizr incluye muchas pruebas de características, pero es posible que no necesites todas. Crear una versión personalizada te permite seleccionar solo las pruebas necesarias, reduciendo el tamaño del archivo y mejorando el rendimiento.

Para crear una versión personalizada de Modernizr, visita el sitio web oficial de Modernizr (https://modernizr.com/download/) y usa el constructor en línea. El constructor proporciona una interfaz donde puedes seleccionar pruebas de características específicas para tu versión personalizada.

En el constructor en línea, encontrarás una lista de pruebas de características disponibles agrupadas en categorías como "HTML5," "CSS," y "JavaScript." Puedes explorar estas categorías y seleccionar las pruebas relevantes para tu proyecto. Por ejemplo, si tu proyecto usa video y audio HTML5, puedes seleccionar esas pruebas específicas.

También puedes combinar múltiples pruebas de características para crear condiciones más complejas. Modernizr permite usar operadores lógicos como AND (&&) y OR (||) para combinar pruebas. Esto es útil cuando se verifica una combinación de características antes de cargar un recurso o aplicar un estilo.

Consejo: Ejemplo: Combinando pruebas de características

if (Modernizr.touch && Modernizr.geolocation) {
  // Código para dispositivos que admiten tanto touch como geolocalización
} else {
  // Código alternativo para dispositivos que no admiten touch o geolocalización
}

Una vez que hayas seleccionado las pruebas de características deseadas y las hayas combinado según sea necesario, genera tu versión personalizada de Modernizr. El constructor en línea generará un archivo JavaScript que incluye solo las pruebas seleccionadas, resultando en un archivo de menor tamaño en comparación con la biblioteca completa.

Después de descargar tu versión personalizada, inclúyela en tu proyecto como cualquier otro archivo JavaScript:

Consejo: Ejemplo: Incluyendo una versión personalizada de Modernizr

<head>
  <script src="ruta/a/custom-modernizr.js"></script>
</head>

Al crear una versión personalizada de Modernizr, optimizas el rendimiento al incluir solo las pruebas de características necesarias. Esto resulta en tiempos de carga más rápidos y reduce el código innecesario en tu proyecto.

Recuerda mantener tu versión personalizada actualizada a medida que tu proyecto evoluciona. Si nuevas características o dependencias requieren pruebas adicionales, actualiza tu versión personalizada visitando nuevamente el constructor en línea.