Modernizr est une librairie Javascript permettant de tester le navigateur de vos visiteurs et de déterminer quelles sont les propriétés CSS3 et HTML5 qu'il est capable de supporter.

Ainsi, avec quelques instructions CSS, vous aurez la possibilité d'utiliser les dernières propriétés CSS3 sur les navigateurs modernes, et proposer une solution alternative aux aux plus anciens.

Au chargement de la page, un objet javascript est créé. Il contient des booléens associés à chaque instruction CSS3:

    font-face
    canvas
    balises audio et video
    border-radius
    Backgrounds multiples
    localStorage
    Etc.

En jouant avec les classes CSS, vous pourrez créer des conditions directement dans votre feuille de style, exemple:

01.<!-- HTML: -->
02.<div id="audio">
03.<audio>
04.<source src="mySong.ogg" />
05.<source src="mySong.mp3" />
06.</audio>
07.<button id="play">Play</button>
08.<button id="pause">Pause</button>
09.</div>

1./* Dans le CSS: */
2..no-audio #audio {
3.display: none; /* La balise audio n'est pas supportée, on cache les options */
4.}
5..audio #audio button {
6./* Balise supportée, on met en page les boutons etc */
7.}

1.// Côté JavaScript:
2.if (Modernizr.audio) {
3.// On rend les boutons fonctionnels ...
4.}

Simple et pratique !

LIEN