Modernizr est une bibliothèque JavaScript qui va nous permettre de détecter la compatibilité de tel ou tel navigateur avec certaines fonctionnalités (CSS par exemple), et ainsi d'adapter notre code avec la disponibilité de la fonctionnalité sur le navigateur du visiteur.

Bon, je m'explique plus clairement ?

Je m'explique avec un exemple.

J'ai un bouton à intégrer, comme ceci:

Et vu que je suis un bon développeur, je n'utilise pas une image mais directement du CSS.
Ceci dit, dans ma spec', il est noté que le site doit être compatible avec IE8.

Je vais donc voir sur CanIUse (ou dans mon cerveau si j'en possède un) si Border-Radius est disponible sur Internet Explorer 8, et je constate que non.

Du coup, il lui faudra une image, pour avoir un bord arrondi. Mais que pour IE8 hein !

<a href="#">Hello World</a>  
a{  
    padding: 10px;
    border-radius: 15px;
    border: 2px solid red;
    background-color: white;
    color: red;
    text-decoration: none;
    margin: 50px auto 0;
    width: 100px;
    text-align: middle;
    display: block;
}

Voici mon code, qui sera compatible tous navigateurs sauf IE8.

Modernizr lorsqu'il est inséré et exécuté dans une page web, ajoutera des balises CSS à notre élément body afin de dire à notre page que border-radius n'est pas compatible.

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>  

Par exemple, sur Jesuisunblog avec le navigateur Firefox 43 sous Windows 7, la balise <html> est:

<html lang="fr" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">  

On constate que border-radius s'y trouve (balise borderradius) donc je vais pouvoir écrire :

.borderradius a{
    border-radius: 15px;
}

ce qui ne sera interprété que par IE9 et supérieur, et les autres navigateurs qui le supportent.

Et donc je fais comment pour IE8 ?

Je vais tout simplement faire ceci:

a{  
    background-image: url("button.jpg");
    background-repeat: no-repeat;
    color: transparent;
}
.borderradius a{
    padding: 10px;
    border-radius: 15px;
    border: 2px solid red;
    background-color: white;
    color: red;
    text-decoration: none;
    margin: 50px auto 0;
    width: 100px;
    text-align: middle;
    display: block;
    background-image: none;
}

On fait donc une dégradation gracieuse du site, avec une méthode alternative au border-radius.

Bien sûr, ce code est totalement perfectible. Ça n'est juste pas vraiment l'objet de ce post ;-)

Et si le Javascript n'est pass activé ?

devrait être de base sur le site.

Et en JS ?

if (!Modernizr.article) {  
    alert("Change de navigateur mec !");
}

vérifie si la balise article existe.

On peut aussi utiliser des conditions avec les @media queries:

if (Modernizr.mq('(min-width: 900px)')){  
    alert('Ta fenêtre fait au moins 900px de large');
}

ou encore détecter si Flash est activé

Modernizr.on('flash', function( result ) {  
  if (result) {
   // the browser has flash
  } else {
    // the browser does not have flash
  }
});

Voir la doc complète ici : https://modernizr.com/docs.

Sources: Site de Modernizr
Github de Modernizr