uniwebsidad

Cómo detectar las funcionalidades de tu navegador con Feature.js

5 de febrero de 2016
programación diseño navegadores

Los principales navegadores publican nuevas versiones continuamente. Por eso resulta casi imposible saber de manera actualizada qué funcionalidades soporta cada versión de cada navegador.

Cuando desarrollas tu sitio o aplicación web, puedes consultar Can I Use.com para conocer qué funcionalidades tienen un soporte amplio entre navegadores y así decidir si haces uso de ella o no. Pero también es necesario realizar esta comprobación mientras se ejecuta la aplicación, para saber si el navegador del usuario soporta las funcionalidades que quieres utilizar.

Aunque ya existen varias librerías que detectan las funcionalidades del navegador, recientemente se ha presentado una nueva librería llamada Feature.js. Sus principales bazas son que no tiene ninguna dependencia, que es muy eficiente y que sólo ocupa 1KB cuando se comprime y minimiza.

Feature.js te puede ayudar a crear aplicaciones y servicios que mejoran/empeoran progresivamente en función del navegador donde se ejecuten.

Instalación

En primer lugar, descarga la librería (a mano o con npm) y enlaza el archivo JavaScript en tus páginas (dentro del <head> o en cualquier otro sitio antes del cierre </body>):

<html>
    <head>
        ...
        <script href="/js/feature.min.js"></script>
    </head>

    ...
</html>

Una vez cargado el archivo JavaScript, la librería se inicializa sola, por lo que no tienes que hacer nada más para empezar a utilizarla.

Ejemplos de uso

Cuando se carga, la librería crea un objeto global llamado feature que se utiliza para comprobar cada funcionalidad del navegador. Por ejemplo, para saber si el navegador soporta WebGL, ejecuta lo siguiente:

if (feature.webGL) {
  console.log("WebGL está soportado");
} else {
  console.log("WebGL no está soportado");
}

Por supuesto puedes combinar varias comprobaciones para realizar tests más complejos:

(function() {
  if (!feature.canvas && !feature.webGL) {
    console.log("La aplicación no se puede ejecutar en este navegador.");
    return;
  }

  // ...
})();

Añadiendo clases CSS para cada funcionalidad

Una de las características más comunes de este tipo de librerías es añadir clases CSS en el elemento <html> o <body> de la página según las funcionalidades que soporte el navegador.

Ejecuta el método feature.testAll() para comprobar todas las funcionalidades y añadir las clases CSS correspondientes en el elemento <html>. Si prefieres añadir solamente las clases CSS de algunas funcionalidades, tendrás que hacerlo a mano de la siguiente manera:

if (feature.webGL) {
  document.documentElement.className += " webgl";
}

Y si usas jQuery, resulta más sencillo todavía:

if (feature.webGL) {
  $("html").addClass("webgl");
}

Lista de comprobaciones

Esta es la lista completa de características que detecta Feature.js en su versión 1.0. Los nombres de todas ellas son autoexplicativos:

  • feature.async
  • feature.addEventListener
  • feature.canvas
  • feature.classList
  • feature.cors
  • feature.contextMenu
  • feature.css3Dtransform
  • feature.cssTransform
  • feature.cssTransition
  • feature.defer
  • feature.deviceMotion
  • feature.deviceOrientation
  • feature.geolocation
  • feature.historyAPI
  • feature.placeholder
  • feature.localStorage
  • feature.matchMedia
  • feature.pictureElement
  • feature.querySelectorAll
  • feature.remUnit
  • feature.serviceWorker
  • feature.sizes
  • feature.srcset
  • feature.svg
  • feature.touch
  • feature.viewportUnit
  • feature.webGL

Recursos útiles