Tutorial Como Detectar Las Funcionalidades de T

Inicio Libros Tutoriales Eventos Foro Buscar
Cmo detectar las

funcionalidades de tu
navegador con Feature.js
Los principales navegadores publican nuevas versiones continuamente. Por eso resulta
casi imposible saber de manera actualizada qu funcionalidades soporta cada versin
de cada navegador.
Cuando desarrollas tu sitio o aplicacin 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 tambin es necesario realizar esta comprobacin mientras
se ejecuta la aplicacin, para saber si el navegador del usuario soporta las
funcionalidades que quieres utilizar.
Aunque ya existen varias libreras que detectan las funcionalidades del navegador,
open in browser PRO version Are you a developer? Try out the HTML to PDF API pdfcrowd.com
recientemente se ha presentado una nueva librera llamada Feature.js. Sus principales
bazas son que no tiene ninguna dependencia, que es muy eficiente y que slo ocupa
1KB cuando se comprime y minimiza.
Feature.js te puede ayudar a crear aplicaciones y servicios que mejoran/empeoran

progresivamente en funcin del navegador donde se ejecuten.
Instalacin
En primer lugar, descarga la librera (a mano o con npm) y enlaza el archivo JavaScript en
tus pginas (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 librera se inicializa sola, por lo que no tienes
que hacer nada ms para empezar a utilizarla.
Ejemplos de uso
Cuando se carga, la librera 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 ms

complejos:
(function() {
if (!feature.canvas && !feature.webGL) {
console.log("La aplicacin no se puede ejecutar en este navegador.");
return;
}
// ...
})();
Aadiendo clases CSS para cada funcionalidad

Una de las caractersticas ms comunes de este tipo de libreras es aadir clases CSS en
el elemento <html> o <body> de la pgina segn las funcionalidades que soporte el
navegador.
Ejecuta el mtodo feature.testAll() para comprobar todas las funcionalidades y

aadir las clases CSS correspondientes en el elemento <html> . Si prefieres aadir
solamente las clases CSS de algunas funcionalidades, tendrs que hacerlo a mano de la
siguiente manera:
document.documentElement.className += " webgl";
}
Y si usas jQuery, resulta ms sencillo todava:
$("html").addClass("webgl");
}
Lista de comprobaciones
Esta es la lista completa de caractersticas que detecta Feature.js en su versin 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
Documentacin oficial de Feature.js
Repositorio oficial del proyecto en GitHub
Comentarios
0 Comentarios LibrosWeb
1 Acceder
Ordenar por los mejores

Recomendar Compartir
S el primero en comentar...
S el primero en comentar.
TAMBIN EN LIBROSWEB
Trucos y ejemplos de configuracin del archivo Copias de seguridad avanzadas para bases de
htaccess de Apache datos MySQL
6 comentarios hace un ao 1 comentario hace un ao
Alan Toledo posiblemente no tengas un certificado Ramon Saki Gracias tengo un scrip para hacer
SSL copia de seguridad de mi base de datos a Amazon
no me haba dando cuenta que cada vez
Los cdigos de estado de HTTP Cmo crear tooltips modernos solamente con CSS
Los cdigos de estado de HTTP Cmo crear tooltips modernos solamente con CSS
1 comentario hace un ao 3 comentarios hace un ao
Martha Villacis Excelente post. Felicitaciones muy Cristyan Valera Muy buena la herramienta!
bueno.
Suscrbete d Aade Disqus a tu sitio web Privacidad
Fecha de publicacin
5 de febrero de 2016
ETIQUETAS POPULARES
composer css diseo html javascript php programacin sistemas symfony
SUSCRBETE GRATIS
RSS Todos los tutoriales

RSS Tutoriales de diseo
RSS Tutoriales de programacin
3.756
2006-2017 LibrosWeb.es Contacto Novedades Condiciones Privacidad
das online

Tutorial Como Detectar Las Funcionalidades de T

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tutorial Como Detectar Las Funcionalidades de T

Cargado por

Copyright:

Formatos disponibles

Inicio Libros Tutoriales Eventos Foro Buscar

Cmo detectar las

Feature.js te puede ayudar a crear aplicaciones y servicios que mejoran/empeoran

Por supuesto puedes combinar varias comprobaciones para realizar tests ms

Aadiendo clases CSS para cada funcionalidad

Ejecuta el mtodo feature.testAll() para comprobar todas las funcionalidades y

Repositorio oficial del proyecto en GitHub

Ordenar por los mejores

Suscrbete d Aade Disqus a tu sitio web Privacidad

RSS Todos los tutoriales

RSS Tutoriales de programacin

También podría gustarte