Detectar funcionalidades de HTML5¶

Modernizr es una librería de JavaScript con licencia MIT de código abierto que detecta si son compatibles elementos de HTML5 y CSS3. Podemos descargar la librería desde "http://www.modernizr.com/". Para utilizarla solo hay que incluir en el <head> de tu página de la forma:

1
2
3

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

Modernizr se ejecuta automáticamente, no es necesario llamar a ninguna función. Cuando se ejecuta, se crea una objeto global llamado Modernizr, que contiene un set de propiedades Boleanas para cada elemento que detecta. Por ejemplo si su navegador soporta elementos canvas, la propiedad de la librería "Modernizr.canvas" será “true”. Si tu navegador no soporta los elementos canvas, la propiedad será “false”, de la forma:

if (Modernizr.canvas) {
   // sí que hay soporte
} else {
   // no hay soporte para canvas
}

Para comprobar elementos de un formulario también podemos crearnos dos simples funciones que validan el soporte para diferentes tipos de inputs y atributos:

Comprobar si un input es soportado¶

Con la siguiente función podemos comprobar si un navegador soporta o no los nuevos tipos de inputs:

function inputSupports(tipo) {
   var input = document.createElement(’input’);
   input.setAttribute(’type’, tipo);
   if (input.type == ’text’) {
      return false;
   } else {
      return true;
   }
}

Por lo que podemos usarlo de la siguiente forma:

1
2
3

if (!inputSupports(’range’)) {
   // Input tipo range no soportado
}

Comprobar si un atributo es soportado¶

Para comprobar si hay soporte para un atributo

function attrSupports(el, attr) {
   var telement = document.createElement(el);
   if (attr in telement) {
      return true;
   } else {
      return false;
   }
}

Por lo que podemos usarlo para comprobar, por ejemplo, los atributos autofocus, placeholder o required:

if (!attrSupports(’input’, ’autofocus’)) {
   document.getElementById(’search_string’).focus();
}
if (!attrSupports(’input’, ’placeholder’)) {
   // Atributo placeholder no soportado
}
if (!attrSupports(‘input’, ‘required’)) {
   // Atributo required no soportado
}