Profitez du CSS3 et du HTML5 avec Modernizr !

Publié par Gui dans CSS

Bien que les technologies évoluent rapidement, que le CSS3 est maintenant bien connu ainsi que le HTML5, on se confronte toujours au problème de leur compatibilité avec d’anciens navigateurs (IE 6 et 7 principalement), encore largement répandus et utilisés.

C’est là qu’intervient Modernizr ! Il s’agit d’une librairie Javascript qui ajoute des classes à la balise <HTML> selon les propriétés de CSS et de HTML disponibles pour un navigateur donné.

<html class= »borderimage no-borderradius boxshadow opacity no-cssanimations csscolumns »>

Les classes sont ajoutées à la volée en javascript, ce qui ne perturbe pas le code source et donc le référencement.

Ainsi il est beaucoup plus facile de cibler les navigateurs pour ajuster les effets de style voulus.

Exemple

div.somediv {
   border-bottom: 1px solid #666;
   border-right: 1px solid #777;
}
.boxshadow div.somediv {
   border: none;
   box-shadow: #666 1px 1px 1px;
   -moz-box-shadow: #666 1px 1px 1px;
   -webkit-box-shadow: #666 1px 1px 1px;
}

De base, pour ajouter une ombre sur un bloc, on ajoute une bordure, qui sera interprétée par tous les navigateurs, car c’est un élément standard.

Ensuite, pour tous les navigateurs qui disposent de l’option box-shadow (Firefox, Chrome, Safari), et qui ont donc la classe « boxshadow », nous ajoutons par simple héritage les propriétés adéquates pour ajouter une jolie ombre.

Il y a aussi des fonctions Javascript qui permettent de tester si le navigateur dispose de telle ou telle propriété, notamment pour les balises HMTL 5.

if (Modernizr.audio) {
  // Traitement
}

Modernizr est donc une librairie très pratique qui permet d’ajuster facilement un design à chaque navigateur, sans trop se préoccuper des propriétés disponibles sur chacun d’entre eux.

Laisser une réponse


Post shadow