04
JUIN

Modernizr - Détectez si vos visiteurs supportent le CSS3 et HTML5

Publié le 04/06/10 à 07h07 par DJo

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.

Modernizr - Testez la compatibilité des navigateurs sur les propriétés CSS3 et HTML5

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:

<!-- HTML: -->
<div id="audio">
   <audio>
      <source src="mySong.ogg" />
      <source src="mySong.mp3" />
   </audio>
   <button id="play">Play</button>
   <button id="pause">Pause</button>
</div>
/* Dans le CSS: */
.no-audio #audio {
   display: none; /* La balise audio n'est pas supportée, on cache les options */
}
.audio #audio button {
   /* Balise supportée, on met en page les boutons etc */
}
// Côté JavaScript:
if (Modernizr.audio) {
   // On rend les boutons fonctionnels ...
}

Simple et pratique !

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web