Avec l’arrivée de HTML5 et de toutes les nouveautés gravitant autour (CSS3, API JavaScript, …), il devient maintenant possible de faire de belles et puissantes applications. Un des problèmes qui se pose alors est la compatibilité des navigateurs avec ces fonctionnalités et le support des anciens navigateurs (qui a dit IE6 😉 ).

C’est la qu’intervient la librairie Modernizr. Cette librairie JavaScript permet de connaître les fonctionnalités supportés par le navigateur de votre visiteur afin de pouvoir adapter votre site et l’expérience utilisateur aux possibilités de son navigateur.

Mise en place

La mise en place sur votre site est très aisée. Il suffit de télécharger le script sur le site et d’inclure le fichier js dans votre page (dans le head de préférence) de cette façon :

Il est possible de créer son propre fichier en sélectionnant les fonctionnalités qui vous intéresse afin d’avoir un fichier le plus petit possible.

Modernizr est également utilisable via les CDN de Microsoft ou CDNJS.

Utilisation

Au chargement de votre page, Modernizr va être initialiser et va réaliser plusieurs choses.

Pour IE, il va créer les nouveaux élément introduit par HTML5 (header, footer, section, article, …). Il vous sera alors possible de styler ces éléments via CSS. N’oubliez de leur appliquer la règle CSS suivante si vous souhaitez que ces nouvelles balises soient interprétées en tant que bloc :

header, footer, aside, nav, article {
display: block;
}

Modernizr va également tester les fonctionnalités HTML5 / CSS3 du navigateur et vous permettre de connaître leur statut. Pour cela, l’attribut class de la balise html de votre page sera mis à jour avec la liste des fonctionnalités supportés ou pas. Dans le cas de Firefox 10, nous obtenons :

Les fonctionnalités non supportés sont préfixés par no-. Vous pourrez ainsi styler votre page en fonction du support de certaines fonctionnalités. Par exemple, dans le cas ou la propriété text-shadow (ombrage sur du texte) est supportée, vous rajouterez de l’ombre sur vos textes via CSS et vous pourrez utiliser une image dans le cas où celle-ci n’est pas supportée.

La librairie met à disposition également un objet JavaScript Modernizr qui permet de tester les fonctionnalités via JavaScript et mettre en place un polyfill au besoin. Un polyfill est une librairie JavaScript qui émule la fonctionnalité non supportée. Bonne nouvelle, il y a pratiquement un polyfill pour chaque fonctionnalité (une liste disponible ici).

Voici un exemple qui permet de tester si l’objet canvas est supporté :

Modernizr.canvas //renvoi true ou false

Voici la liste des fonctionnalités testables en natif via Modernizr. Il est possible de rajouter d’autres propriétés via des extensions.

La librairie met également à disposition une méthode load(). Il s’agit d’une fonction de chargement de ressources (CSS et JS). Cette fonctionnalité est issue de la librairie yepnopejs. C’est via cette fonctionnalité que vous allez pouvoir charger vos polyfills.

Modernizr.load({
  test: Modernizr.geolocation,
  yep : 'geo.js',
  nope: 'geo-polyfill.js'
});

Dans le cas où la fonctionnalité de géolocalisation est supportée, le fichier geo.js sera chargé sinon geo-polyfill.js le sera. Il est possible de ne charger que dans le cas où la fonctionnalité est supportée (ou inversement) et de charger plusieurs fichiers. Enfin sachez que le chargement se fait de manière asynchrone et en parallèle.

Conclusion

Modernizr est une librairie très utile si vous souhaitez commencer à tirer parti des avancées d’HTML5 tout en adaptant votre page aux anciens navigateurs. Celle-ci est très populaire et utilisée par de grand nom comme Twitter, Google, Microsoft, The Economist, …