Merida Design Blog

Publicado el | Recursos / ,

Feature.js: Rápida y liviana librería para detectar las características del navegador

Feature.js es una librería javascript que te permite detectar cuales son las características que están presentes en el navegador, además no tiene dependencias, lo que la hace muy ligera (1kb minificada y gzipped).

Feature.js se inicializa automáticamente al cargar la página pero no ejecuta ninguna prueba durante la inicialización, éstas las ejecutas manualmente solo cuando necesitas, haciendola mas rápida y mejorando con esto el desempeño de tu aplicación o página web.

Esta librería es ideal para desarrollar aplicaciones usando el enfoque de mejora progresiva, es decir, añadir funcionalidad adicional que mejore la experiencia de uso cuando se detecte que cierta característica necesaria está presente en el navegador, por ejemplo, los serviceWorker para funcionamiento offline.


Modo de uso

Descarga la librería e inclúyela en el HTML, ya sea en el head o antes del cierre del body, luego solamente evalua si existe la característica como se muestra en el siguiente ejemplo:

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

También es posible agregar clases al elemento <html> como lo hace Modernizr cuando alguna característica esté disponible.

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

De esta forma se pueden definir estilos específicos para ciertas características y que se apliquen solamente cuando esten presentes en el navegador.


Características que se pueden detectar

A continuación te presento la lista de todas las características que es posible detectar usando esta librería.

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

feature.testAll();

Página: http://featurejs.com/



Publicaciones que pueden interesarte

    Deja un comentario

      tope
    Derechos Reservados, Merida Design 2017
    %d bloggers like this: