Modernizr est une librairie qui permet de détecter le support de différentes fonctionnalitées CSS/JS. Cette détection peut ensuite être utilisée depuis votre CSS en rajoutant des règles spécifiques ou depuis votre JavaScript pour éxécuter un code en fonction du support (ou non support) d'une fonctionnalité.
La première étape consiste à se créer un build personnalisé en sélectionnant les fonctionnalités que l'on souhaite détecter via la page téléchargement. Il est aussi possible d'activer HTML5Shiv pour permettre le style sur des éléments HTML5 sur des vieux navigateurs (IE6+, Safari 4, Firefox 3...).
Comment ça marche ?
Par défaut, Modernizr ajoutera une classe à votre balise <html> pour vous indiquer si les fonctionnalités cochées sont disponibles ou non. Cette classe vous servira ensuite à faire un traitement spécial depuis votre CSS.
.no-cssgradients .monelement{
background-color: #000;
}
.cssgradients .monelement {
background-image: linear-gradient(#000, #FFF);
}Mais cette détection peut aussi se faire en JavaScript
if (Modernizr.cssgradients) {
consol.log('Je supporte les dégradés !')
}Il est aussi possible d'ajouter nos propres tests pour détecter le support de fonctionnalitées spécifiques
Modernizr.addTest('jquery', function () {
return 'jQuery' in window
});Ils existent d'autres méthodes, plus ou moins utiles suivant les cas, que vous pourrez découvrir sur la documentation.
