Le site permet de sélectionner ce que l'on souhaite détecter. Par exemple, un background dégradé, flexbox, border, transformation CSS, vidéo html5, canvas. C'est mieux de choisir le strict nécessaire en fonction de votre site. Si vous choisissez tout ce que propose Modernizr, cela risque de rendre votre site lourd pour rien du tout.
Après que vous ayez fini de sélectionner ce que vous souhaitez tester. Il suffira de copier-coller un code généré dans "BUILD" et de le mettre dans votre modernizr.js de votre dossier de travail.
Modernizr peut-également faire des tests personnalisables, tester le jquery, les medias queries etc...
Site : https://modernizr.com/
Doc : https://modernizr.com/docs
En gros pour résumer Modernize, va indiquer si les navigateurs prends en charges certaines fonctionnalités que vous utiliserez sur votre site tout en gardant une compatibilité sur d'anciens navigateurs.
Exemple :
Si Modernizr détecte un non fonctionnement de box-shadow il indiquera : no-boxshadow
Du coup, comme ce navigateur ne l'utilise pas, je vais le désactiver.
/** Code qui sera interprété par les navigateurs qui appliquera le box-shadow**/
.boxshadow{
border-shadow: 3px 3px 7px #aaa;
}
/** Code pour les navigateurs qui ne prend pas en compte le box-shadow**/ . no-boxshadow.boxshadow
{
border: 1px solid #ddd;
}
Vous pouvez mettre aussi des conditions sur la reconnaissance des balises HTML5
if(modernizr.nav){
// Dans le cas où la balise nav n'est pas reconnu
}