Graphoeil Multimédia
Menu

Modernizr, la bibliothèque de détection

Modernizr ? c'est quoi ...

Pour faire court Modernizr est une bibliothèque Javascript de détection qui permet de détecter si le navigateur que utilisé par l'internaute supporte telles ou telles fonctionnalités, je vais vous présenter rapidement le principe à travers la fonctionnalité touchevents.

hover ou focus ?

Combien de fois ne vous êtes vous pas arrachés les cheveux devant cette question existentielle, l'internaute utilise-t-il une tablette, un smartphone ou un pc (avec une souris ...) ?

S'en suis moult bidouillages à la :

if (navigator.userAgent.indexOf('iPhone') != -1){ document.location = "versi.. etc, etc...

Et combien de fois vous êtes vous demandé, je cible hover ou focus !!!

Modernizr le sauveur

Avec l'arrivée de Modernizr, tout ces soucis repartent au fond de la grotte et votre façon de coder passe à l'ère industrielle...

En vous rendant sur modernizr.com et en cliquant sur add your detects, vous arrivez sur l'écran de sélection des fonctionnalités, pour notre exemple nous allons sélectionner "Touch Events" qui nous indiquera s'il vaut true que nous sommes sur un iPhone, un android, une tablette ou tout autre support disposant d'un écran tactile.

Un clic sur le bouton + à gauche de Touch Events, un autre sur le bouton Build puis un dernier sur download et tout est prêt ! Il ne reste plus qu'à envoyer les fichiers dans le serveur et intégrer le script dans la page.

J'ai volontairement commentés mes balises ci-dessous vous vous doutez bien pourquoi... <!-- script src="modernizr-custom.js"></script -->

Modernizr en action !

Une fois installé, Modernizr applique instantanément une classe touchevents en présence d'un support tactile ou no-touchevents dans le cas contraire.

Première implication, sur le CSS bien sur, imaginons un lien et son hover ou non ? il suffira de cibler uniquement le no-touchevents, car en effet pas de hover sur un tactile !

html.no-touchevents a:hover{ background-color:firebrick; }

Et le focus alors pour les tactiles ? Pas de panique voici la solution :

html.touchevents a:focus{ background-color:yellow; }

Pratique hein

Et avec jQuery, c'est encore mieux !

Un booléen et vos scripts s'en trouvent révolutionnés ...

var isTouchDevice = false; if (Modernizr.touchevents){ isTouchDevice = true; }

Dès lors nous pouvons écrire :

if (!isTouchDevice){ $('a').hover(function(){ Fait ceci au survol },function(){ Fait cela quand la souris sort }); }

Conclusion

Modernizr vous permettra d'aller beaucoup plus loin lors de la création de site internet, en détectant par exemple si le navigateur supporte la géolocalisation, la 3D en WebGL, la gestion de la batterie, les canvas, les éléments audio et vidéo du HTML5. Toutes ces fonctionnalités vous permettront d'optimiser votre site web au mieux en fonction du support ou non de tel ou tel élément.

Liens utiles

modernizr.comjQuery