Modernizr
- François
On parle souvent ici ou ailleurs de HTML5, CSS 3, des websockets et d’autres nouveautés. On réalise alors nos sites persos avec 4 balises HTML, 15 lignes de CSS et pas une seule image.
Dans des accès de folie on veut utiliser la même chose pour les clients. Seulement le client veut en général que ce soit joli sur tous les navigateurs, avec éventuellement une dégradation acceptable (pas de coins arrondis, pas d’ombre, etc …).
Si on désire profiter des nouvelles fonctionnalités présentes dans les navigateurs modernes tout en ayant un bon support des autres, il faut faire de la détection de fonctionnalités. Se fier à l’identifiant des navigateurs est trop risqué.
Une petite bibliothèque qui monte est Modernizr, 9.4Ko minifiée et 3.8Ko gzippée. Elle permet la détection de fonctionnalités en utilisant des sélecteurs css ou avec une api javascript.
Au chargement Modernizr rajoute des class sur l’élément HTML pour chaque fonctionnalités détecté ou manquante.
Ainsi, si votre navigateur ne supporte pas box-shadow, Modernizr va rajouter la class no-boxshadow. Si, au contraire, il supporte cette fonctionnalité, elle rajoutera la class boxshadow. À vous ensuite de mettre dans votre css les règles de contournement.
Voici un exemple volé sur la documentation de Modernizr :
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;
}
La détection est accessible en javascript :
if (Modernizr.boxshadow) {
alert('youpi');
}
Modernizr détecte un grand nombre des fonctionnalités de toute la traîne HTML5 et de CSS3.
Elle facilite l’utilisation des nouveautés, mais rien de miraculeux, si votre client veut le même rendu sur tous les navigateurs, l’utiliser ne pourra que doubler votre travail, ne serait ce qu’en maintenance.
Les mots clés sont donc : dégradation élégante et amélioration progressive.
Have a comment? Contact me by email.