Découvrir la bibliothèque Modernizr
Donc, dans cet article, je vais vous présenter une façon de vous assurer que vos conceptions sont en mesure de tirer parti des nouvelles fonctionnalités HTML5 et CSS3 en utilisant la bibliothèque JavaScript Modernizr.
Si vous ne maitrisez pas ou ne connaissez rien au JavaScript, aucun problème. Il vous suffit juste d’avoir des bases en CSS et en HTML5 pour suivre ce tutoriel.
Qu’est-ce que Modernizr ?
Modernizr est une bibliothèque JavaScript qui vous permet de communiquer avec le navigateur de la manière suivante :
- Demande au navigateur s’il reconnait et supporte la fonctionnalité x
- Ne fais rien si le navigateur connais et supporte la fonctionnalité x
- Propose une alternative, code en javascript pour la fonctionnalité x
Modernizr n’ajoute pas de fonctionnalités aux navigateurs. Il vous indique simplement si oui ou non le navigateur prend en charge la fonctionnalité que vous essayez d’utiliser. Cela vous permet d’expérimenter avec le HTML5 et le CSS3 de nouvelles fonctionnalités sans vous soucier de la compatibilité avec les nouveaux navigateurs.
Tirer parti des nouvelles fonctionnalités de HTML5 et CSS3 ne signifier plus le sacrifice des anciens navigateurs. Modernizr fera fonctionner correctement votre site quelque soient les navigateurs ou appareils utilisés par vos visiteurs.
Vous pouvez maintenant combiner la détection de caractéristiques avec les demandes des médias et de chargement des ressources conditionnelle. Cela vous donne la puissance et la flexibilité pour un confort optimal en toutes circonstances.
Télécharger et relier Modernizr à votre site web
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html> <head> <script src="js/modernizr-2.5.3.min.js"></script> </head> <body> <!-- Corps du document --> </body> </html> |
Lorsque vous téléchargez Modernizr, vous avez la possibilité de télécharger la version de développement complet ou un build personnalisé qui inclut uniquement les pièces dont vous aurez besoin.
Il ne vous reste plus qu’a relier le fichier javascript à votre site web. (comme sur l’exemple ci-dessus, entre les balises <head>).
Si vous utilisez des nouveaux éléments HTML5, vous avez probablement entendu parler du script SHIM. Script bien connu des developpeurs HTML5 pour assurer une comptabilité multi-navigateurs en dénommant la sémantique des nouveaux éléments HTML5.
Chaque fois que vous inclurez Modernizr dans un projet, vous pourrez supprimer la référence au script SHIM. Les pages construites avec Modernizr comprennent automatiquement le script SHIM par défaut. Cet avantage peut sembler mineur, mais avec les fichiers que vous avez an moins à charger dans votre projet, votre site s’affichera plus rapidement !
Comment fonctionne Modernizr
Pour consulter la quantité de travail effectué en arrière-plan au chargement de Modernizr, il vous suffit de vérifier la source généré pour n’importe quelle page qui inclut la bibliothèque Modernizr.
Consulter la source généré n’est pas la même chose que « Afficher code source ». Vous devrez utiliser les outils de développement web commeFirebug (pour Firefox) ou les outils qui sont installés avec Chrome, Safari, et de nouvelles versions de IE.
Lorsque la page se charge, Modernizr effectuera certain nombre de tests de fonctionnalités (détection de toutes sortes de caractéristiques HTML5 et CSS3) et ensuite modifier la balise en ajoutant des class basées sur les résultats de ces tests.
Si une fonctionnalité est supportée par le navigateur, cette fonctionnalité est ajoutée par le nom en tant que classe à la balise. Si la fonction n’est pas supportée, la classe est ajouté et préfixé par « no- ». Donc, si vous affichez la même source généré dans un vieux navigateur comme IE8, vous verrez beaucoup de « no- ».
Ces classes peuvent ensuite être utilisés dans votre CSS pour appliquer un style différent, selon que la fonctionnalité est supportée ou non. Donc, pour l’exemple, si vous souhaitez utiliser la fonctionnalité de CSS3 d’ombrage :
1 2 3 4 |
.no-boxshadow .box { border: solid 2px #cc0000; } .boxshadow .box { border-shadow: 3px 3px 7px #aaa; } |
Il convient de noter ici que dans de nombreux cas, utiliser des class Modernizr pourrait créer du code inutile. Par exemple, si vous utilisez plusieurs backgrounds, il sera suffisant de déclarer la propriété background-image deux fois dans le même ensemble de règles – une pour l’arrière-plan simple de repli, et un qui fait référence à multiple backgrounds. Donc, la classe Modernizr de «no-multiplebgs » ne sera pas nécessaire dans ce cas.
N’importe quelle ligne de CSS qu’un navigateur ne comprend pas sera complètement ignorés. En outre, Modernizr ajoute également une class« js » ou « no-js » à la balise, ce qui indique si oui ou non le navigateur prend en charge le JavaScript.
Cela vous permet d’appliquer à des éléments des styles différents lorsque le JavaScript n’est pas disponible. Pour profiter de cela, il suffit d’ajouter « .no-js » au début du sélecteur CSS pour les styles que vous souhaitez appliquer.
Tester et modifier certains éléments
En plus de charger des scripts distincts fondés sur certaines conditions, vous avez la possibilité d’utiliser un branchement conditionnel à l’intérieur d’un script déjà existant. Par exemple, si vous utiliser la nouvelle balise HTML5 article, pour agir dessus, il vous faudra inclure le code JavaScript suivant :
1 2 3 |
if (!Modernizr.article) { // La balise article nest pas reconnu dans ce navigateur // Effectuer les actions entre ces crochets } |
Le code ci-dessus, à l’intérieur de l’instruction if, sera effectué dans n’importe quel navigateur ne supportant pas la balise article en HTML5.
Un certain nombre d’autres fonctionnalités peuvent être testés de cette manière, assurez-vous d’examiner toutes les fonctionnalités prises en charge dans la documentation Modernizr.
En résumé, Modernizr est indispensable pour développer en HTML5
N’ayez pas peur d’expérimenter Modernizr dans votre prochain projet. C’est l’élément essentiel pour offrir un compatibilité maximum avec vos développement HTML5 !