Zoom sur le plugin Javascript Modernizr

Découvrons la bibliothèque Modernizr, qu’est-ce que c’est ? Comment ça marche ? À quoi ça sert ?

Tous les fonctionnalités CSS3 ou HTML5 ne fonctionnant pas sur tous les navigateurs, il est de notre devoir de nous assurer que nous offrons une alternative à ces navigateurs récalcitrant.

Ainsi, nous allons vous montrer la manière de pouvoir utiliser les nouvelles fonctionnalités CSS3 et HTML5 sans risque. Modernizr va nous aider pour cela.

modernizr

Modernizr, qu’est-ce que c’est ?

Modernizr test le navigateur afin de connaitre s’il supporte oui ou non une fonctionnalité.

Une chose importante à savoir, c’est que Modernizr n’ajoute en rien de nouvelles fonctionnalités aux différents navigateurs. Ce qu’il fait en revanche c’est d’indiquer si oui ou non un navigateur prend en charge la fonctionnalité utilisée. Cela nous permettra d’expérimenter de nouvelles fonctionnalités avec le CSS3 et le HTML5 sans pour autant sacrifier les anciens navigateurs.

Téléchargement et déclaration de Modernizr

Lors du téléchargement de Modernizr, il vous est permis de télécharger la version de développement ou bien un « build » personnalisé incluant seulement les éléments donc vous auriez besoin.

Ensuite, il ne vous suffira que plus qu’à le déclarer dans le head de votre page.

Le fonctionnement de Modernizr

Si vous désirez effectuer une consultation de la quantité de travail qui est effectué en arrière-plan lors du chargement de Modernizr, vous n’aurez qu’à inspecter votre source.

Ainsi, lorsque la page se chargera, Modernizr réalisera des tests de fonctionnalités par rapport aux caractéristiques CSS3 et HTML5 supportées ou non. Puis, il va ajouter des « class ».

Lorsqu’une fonctionnalité est supportée par le navigateur, celle-ci sera automatiquement ajoutée par son nom en tant que classe à la balise. Dans le cas contraire, la classe sera tout de même ajoutée, mais préfixée par « no-». Ainsi, si vous désirez afficher la source générée dans votre ancien navigateur IE8 par exemple, vous ne verrez que de nombreux « no-».

Par exemple, si vous souhaitez faire appel à la fonctionnalité box shadow, voici ce qu’il faudra écrire :

En outre, Modernizr ajouter une class « js » ou « no-js » à la balise html. Cela permet d’indiquer si le navigateur supporte oui ou non le JavaScript.

Test sur les fonctionnalités supportés via JavaScript

Grâce à Modernizr, vous pourrez exécuter certaines fonctions javascript suivant certaines conditions.

Par exemple, si vous utiliser la nouvelle balise HTML5 header, pour agir dessus, il vous faudra inclure le code JavaScript suivant :

Ce code s’appliquera à tous les navigateurs ne supportant pas la balise « header» en HTML5 cela notamment grâce à la structure conditionnelle « if ».

Une vidéo de démonstration

Répondre