Le Blog

Le blog laboratoire de F.L.D. Studio
0

La vie en rose

La vie en rose

Sur le site de l'éditeur de Modernizr on trouve la définition suivante de la librairie :

Modernizr est une bibliothèque JavaScript qui détecte les fonctionalités HTML5 et CSS3 du navigateur de l'utilisateur.

Tout est dit. Avec modernizr on a la possibilité de savoir si le navigateur de l'utilisateur supporte ou pas certaines des fonctionalités que l'on souhaite utiliser dans son application. Si c'est le cas on peut le faire avec du code "natif" et dans l'autre cas proposer une solution adaptée aux capacités du navigateur. Cela est vrai pour les regles CSS et aussi pour les bibliothéques JS que l'on va charger dans la page.

La bibliothéque est disponible en deux versions, une pour le développement (complette) est une autre à géométrie variable pour la production. En effet on construit son module d'exploitation en fonction de ses besoins, cela minimise sa taille. Si on à oublié quelque chose, pas de probléme, l'URL qui à permit de le constituer est fournie en ligne commentée sur la première ligne. Il suffit de la recopier, de la soumettre au navigateur et on retrouve la page qui à permit de construire sa propre version de Modernizr.

C'est donc un outil indispensable pour tester les possibiltés du navigateur de son utilisateur. En bonus on à droit à  l'intégration native de html5shiv.js pour les navigateurs qui ne comprennent pas les balises du HTML5, un loader asynchrone de scripts JavaScript (Yepnote) . Ce chargeur de script combiné avec les tests de modernizr en fait un outil très puissant et simple à utiliser. Il permet ainsi de ne charger pour la page que les ressources qui lui seront necessaires pour effectuer certaines taches si les fonctionalités que l'on veux utiliser ne sont pas natives. Dans la partie Extensibility on trouve aussi un outil de gestion des prefix CSS.

Modernizr,incontournable si on doit gérer des navigateurs anciens.

Pour savoir ce que gére nativement votre navigateur, utiliser le site : http://haz.io/ (construit à l'aide de Modernizr)

Les sources du site : https://github.com/philippbosch/haz

Et enfin pour disposer de tous les polyfills necessaires et ne les utiliser que si besoin, utiliser la libriairie WebShim :  http://afarkas.github.io/webshim/demos/ (necessite Jquery et Modernizr)

Catégories: Développement WEB

Tags: Outil

Commentaires: Pas de commentaires

Envoyer un commentaire