Les navigateurs traditionnels ne sont pas complètement remplacés pour le moment, ce qui vous rend difficile d'intégrer les dernières fonctionnalités CSS3 ou HTML5 dans votre site Web. Modernizr a vu le jour pour résoudre ce problème. En tant que bibliothèque JavaScript open source, Modernizr détecte la prise en charge du navigateur pour les fonctionnalités CSS3 ou HTML5. Modernizr n'essaie pas d'ajouter des fonctionnalités qui ne sont pas prises en charge par les anciens navigateurs, mais vous permet de modifier la conception de la page en créant des configurations de style facultative. Il peut également simuler des fonctionnalités qui ne sont pas prises en charge par les anciens navigateurs en chargeant des scripts personnalisés.
Modernizr est simple à utiliser, mais pas omnipotent. L'utilisation réussie de Modernizr dépend fortement de vos compétences CSS et JavaScript. Ce guide vous permet d'apprendre à définir des styles facultatifs pour les navigateurs qui ne prennent pas en charge les multi-colonnes ou les projections. De plus, vous pouvez apprendre à obtenir des navigateurs plus âgés pour valider les formulaires qui utilisent les dernières propriétés requises HTML5, et comment charger sélectivement des fichiers de script en fonction de la fonctionnalité du navigateur.
Modernizr est une bibliothèque JavaScript utilisée pour détecter la prise en charge de la fonctionnalité du navigateur. Actuellement, en vérifiant le traitement par le navigateur d'une série de tests, Modernizr peut détecter 18 fonctions CSS3 et plus de 40 fonctions sur HTML5. Il est plus fiable que les moyens traditionnels de détecter les noms de navigateur (reniflement du navigateur). Le temps d'exécution d'un ensemble complet de tests ne prend que quelques microsecondes. De plus, le site Web Modernizr utilise des scripts personnalisés pour détecter uniquement les éléments d'intérêt, réalisant ainsi l'optimisation de l'efficacité.
Lorsque vous utilisez Modernizr pour détecter le support CSS3, vous n'avez pas besoin d'avoir des connaissances JavaScript. Vous n'avez qu'à insérer un fichier dans la page Web, et il ajoutera ensuite un ensemble de classes à la balise <html> de la page en fonction de la fonctionnalité du navigateur. Les noms des classes correspondants ont satisfait aux exigences de normalisation et sont faciles à comprendre. Par exemple, si le navigateur prend en charge la propriété Box-Shadow, vous devez ajouter la classe Boxshadow correspondante; Sinon, ajoutez une classe sans boxshadow. Tout ce que vous avez à faire est de créer une table de style qui utilise ces classes pour fournir le style approprié pour le navigateur correspondant.
Modernizr facilite la mise en œuvre de solutions JavaScript, appelées polyfills - il simule les fonctionnalités et les technologies liées à HTML5 telles que la géolocalisation. Cependant, vous devez avoir une compréhension de base de JavaScript afin d'utiliser ces fonctionnalités et technologies. Le terme polyfill provient d'une marque britannique d'argile qui remplit les fissures (c'est-à-dire le matériel de remplissage connu des Américains). Ici, le polyfill est utilisé pour remplir les fonctions du navigateur. Parfois, Modernizr accomplit cette tâche de manière transparente. Mais essentiellement, ce n'est qu'un travail de correction, vous ne pouvez donc pas compter sur lui pour produire exactement le même résultat obtenu par un navigateur vulnérable.
Comme d'autres bibliothèques JavaScript, Modernizr fournit des versions de développement et de production. La seule différence par rapport à la plupart des bibliothèques est que les espaces et les commentaires ont été supprimés de la version de production, ce qui réduit la taille des téléchargements. Modernizr adopte une approche différente. La version de développement peut être appelée un évier dans une cuisine dans un sens - il contient presque tout. La version de production ne contient que les éléments que vous choisissez, ce qui peut réduire considérablement les téléchargements. Dans de nombreux cas, la version de production peut être réduite à un twentième de la taille de la version de développement.
Lorsque vous testez avec Modernizr, je vous recommande de télécharger la version de développement. Une fois que vous avez maîtrisé son fonctionnement et ses capacités, vous pouvez télécharger une version de production personnalisée pour le déploiement sur votre site Web.
L'exemple de fichier pour ce tutoriel contient la version Development 2.0.6 de Modernizr, mais je vous suggère de la remplacer par la dernière version mise à jour du site Modernizr.
Remarque: Si vous cliquez sur le lien de téléchargement dans le menu de navigation principale par erreur, vous verrez un grand nombre de cases apparaître, vous demandant de sélectionner l'outil souhaité. Ceci est défini pour la version personnalisée de la production. Cliquez sur le lien vers la version de développement en haut du panneau, ou cliquez sur le bouton Retour de votre navigateur pour revenir à la page d'accueil et sélectionner le bouton de développement illustré à la figure 1.
Comme mentionné précédemment, Modernizr n'essaie pas d'ajouter de nouvelles fonctionnalités aux navigateurs plus anciens, mais il vous permet de compenser ces fonctionnalités manquantes dans votre style. Pour montrer comment cela fonctionne, l'exemple de fichier contient une page appelée css_support_begin.html. Si vous chargez cette page dans un nouveau navigateur, il devrait ressembler à la figure 2.
Figure 2. Firefox 5 affiche la page au format multi-colonnes et ajoute des ombres à l'image Le style de cette page consiste à utiliser column-count et box-shadow de CSS3 pour afficher le texte au format multi-colonne et ajouter des ombres à l'image. Les versions plus anciennes des navigateurs ne prennent en charge aucune de ces propriétés, donc la même page dans Internet Explorer (IE) 7 ressemble à la figure 3.
Dans IE9, la même page montre l'ombre de l'image, mais le texte est le même que la disposition illustrée à la figure 3.
Ce que vous prenez pour essayer de compenser les fonctionnalités manquantes dépend des exigences de votre plan de conception. Cela impliquera beaucoup de travail pour essayer de rendre la page exactement la même chose dans tous les navigateurs, mais vous pouvez apporter des améliorations simples, comme entourant le texte autour de l'image, en ajustant les marges gauche de l'image au texte, et en ajoutant de vagues limites aux bords inférieurs et droits de l'image pour que cela se sente comme un plus tridimensionnel.
Modernizr utilise JavaScript pour détecter les fonctionnalités prises en charge par le navigateur, mais au lieu d'utiliser JavaScript pour charger dynamiquement différentes feuilles de style, il utilise des techniques très simples pour ajouter des classes à la balise <HTML> de la page. Ensuite, en tant que concepteur, c'est à vous de décider d'utiliser le boîtier CSS pour fournir le style approprié pour les éléments cibles. Par exemple, si la page prend en charge la propriété box-shadow , Modernizr ajoutera boxshadow . S'il n'est pas pris en charge, il est ajouté avec la classe no-boxshadow en tant que substitut.
Étant donné que les navigateurs ignorent les propriétés CSS qu'ils ne peuvent pas reconnaître, vous pouvez utiliser box-shadow en toute confiance en fonction de vos règles de style de base, mais vous devez ajouter un sélecteur de descendant distinct pour les navigateurs plus âgés dans le format suivant:
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ } Seuls les navigateurs qui ne prennent pas en charge box-shadow auront une classe no-boxshadow , de sorte que d'autres navigateurs n'appliqueront pas cette règle de style.
Ajoutons Modernizr à l'exemple de page et vérifions les classes qu'il ajoute à la balise <html>.
<!DOCTYPE HTML> <html> <!DOCTYPE HTML> <html class=no-js>Modernizr s'appuie sur JavaScript activé dans le navigateur. Lorsqu'il est activé, cette classe est supprimée dynamiquement. Cependant, dans de rares cas, JavaScript est toujours présent dans HTML Makup lorsqu'il n'est pas activé, ce qui vous permet de créer des règles de style spécial pour ces visiteurs si nécessaire.
</style> <script src=js/modernizr.js></script> </head> Remarque: Si vous utilisez le panneau d'insertion ou le menu d'insertion, Dreamweaver ajoutera type=text/javascript à la balise <cript> initiale. Ce n'est plus requis dans HTML5, mais le garder ne causera aucun mal.
Remarque: Si votre version Dreamweaver n'a pas de code en direct (ou si vous utilisez un éditeur HTML différent), vous pouvez vérifier le code généré à l'aide d'outils de développement fournis par la plupart des nouveaux navigateurs ou Firebug fournis par Firefox Browsers.
Comme le montre la figure 4, la classe no-js a été remplacée par js , ce qui indique que JavaScript a été activé.
Le tableau 1 répertorie les noms de classe utilisés par Modernizr pour indiquer la prise en charge de CSS3. Si une fonction ne le prend pas en charge, le nom de la classe correspondante est préfixé avec no- .
Tableau 1. Fonctions CSS3 détectées par Modernizr
Fonctionnalités CSS | Classe modernizr (propriétés) |
@font-face | fontface |
::before et ::after les pseudo-éléments | generatedcontent |
background-size | backgroundsize |
border-image | borderimage |
border-radius | borderradius |
box-shadow | boxshadow |
Animations CSS | cssanimations |
Transformations CSS 2D | csstransforms |
Transformations CSS 3D | csstransforms3d |
Transitions CSS | csstransitions |
Disposition flexible de la boîte | flexbox |
Gradients | cssgradients |
hsla() | hsla |
Disposition multi-colonnes | csscolumns |
plusieurs arrière-plans | multiplebgs |
opacity | opacity |
réflexion | cssreflections |
rgba() | rgba |
text-shadow | textshadow |
Peu importe où un attribut CSS spécifique est testé, le nom de classe et le nom de la propriété sont les mêmes, mais cela nécessite la suppression de tout trait d'union ou support. D'autres classes sont nommées d'après le module CSS3 auquel ils se réfèrent.
Voir le tableau 1, vous pouvez voir que Modernizr utilise respectivement boxshadow et csscolumns pour afficher la prise en charge des propriétés box-shadow et de la disposition multi-colonnes. Par conséquent, vous pouvez utiliser les classes no-boxshadow et no-csscolumns pour créer des règles de style spécial pour les navigateurs qui ne prennent pas en charge ces fonctionnalités.
Pour s'assurer que la directive est simple, je démontrerai uniquement un exemple de déclarations CSS. Vous pouvez les taper directement dans la vue de code ou utiliser la nouvelle boîte de dialogue Règle CSS.
.no-boxshadow img . #8A8A8A ). Les règles de style qui en résultent devraient ressembler à ceci:.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }Ce n'est pas aussi attrayant que les ombres translucides, mais malgré cela, cela permet toujours à l'image de faire légèrement dépasser l'arrière-plan.
.no-csscolumns img . .no-csscolumns img { margin: 3px 8px 3px 0; float: left; } .columns img . Les deux règles ont la même particularité, donc si elles sont inversées, la marge gauche à 10 pixels .columns img peut écraser la nouvelle règle que vous venez de créer. Vous pouvez renommer .no-csscolumns img à .no-csscolumns .columns img pour lui donner une spécificité plus élevée, mais il est préférable de s'assurer que plus le sélecteur est simple, mieux c'est. (Soit dit en passant, si vous ne savez pas quelle est la particularité , consultez l'article d'Adrian Senior, Comprendre la spécificité. Il a été publié depuis longtemps, mais c'est précieux.) Dans cet exemple simple, j'ai créé des styles spéciaux pour les anciennes versions de navigateurs en utilisant uniquement la classe préfixée avec no- . Cependant, par leurs capacités, il est absolument inutile pour vous d'utiliser les deux classes (avec ou sans préfixes) de créer différents styles pour votre navigateur. Par exemple:
.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }Parfois, cette approche est raisonnable, par exemple, si vous souhaitez créer une disposition complètement différente pour chaque niveau de support. Mais s'il s'agit simplement de fournir des styles sélectionnables pour les navigateurs plus âgés, n'oubliez pas que le navigateur ignore les propriétés qu'ils ne reconnaissent pas. Si vous utilisez la classe Modernizr pour tous les styles, votre page sera complètement désagrégée dans un navigateur méconnu JavaScript.
Modernizr ajoute le nom de classe de la balise de départ <html> pour lire un double objectif. Lorsque les pages se chargent, ce sont également les noms des propriétés JavaScript créées par l'objet Modernizr. Le tableau 1 répertorie les noms des classes et des attributs liés à CSS. Le tableau 2 répertorie les classes et attributs restants liés au HTML5 et aux technologies connexes, telles que les emplacements géographiques.
Tableau 2. Caractéristiques liées à HTML5 détectées par Modernizr
Fonctionnalités liées à HTML5 | Classe modernizr (propriétés) |
Cache d'application | applicationcache |
Audio | audio. type (ogg, mp3, wav, m4a) |
Toile | canvas |
Texte de toile | canvastext |
Faire glisser et laisser tomber | draganddrop |
Attributs d'entrée de formulaire | input. attributeName |
Formez des éléments d'entrée | inputtypes. elementName |
Géolocalisation | geolocation |
événement de hashchange | hashchange |
Gestion de l'histoire | history |
Indexédb | indexeddb |
SVG en ligne | inlinesvg |
Stockage local | localstorage |
Messagerie | postmessage |
Stockage de session | sessionstorage |
Smil | smil |
SVG | svg |
Chemins de clip SVG | svgclippaths |
Tactile | touch |
Vidéo | video. type (ogg, webm, h264) |
Webgl | webgl |
Folie | websockets |
Base de données Web SQL | websqldatabase |
Travailleurs du Web | webworkers |
Dans la plupart des cas, tous les attributs répertoriés dans les tableaux 1 et 2 renvoient true ou false . Ainsi, vous pouvez tester le stockage local à l'aide de JavaScript comme indiqué ci-dessous:
if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported } Cependant, en termes d' audio et video , la valeur de retour est une chaîne qui indique que le navigateur est capable de gérer un certain type de niveau de confiance. Selon la spécification HTML5, une chaîne vide signifie que le type n'est pas pris en charge. Si ce type est pris en charge, la valeur de retour est peut-être ou probablement. Par exemple:
if (Modernizr.video.h264 == ) { // h264 is not supported } HTML5 ajoute de nombreuses nouvelles propriétés de formulaire, telles que autofocus , qui place automatiquement le curseur dans un champ spécifié lorsque la page est chargée pour la première fois. Une autre propriété utile est required , ce qui empêchera les navigateurs compatibles HTML5 de soumettre des formulaires si un champ requis est laissé vide (voir figure 6).
C'est génial, mais cela vous laissera une question: que devez-vous faire avec des versions plus anciennes de votre navigateur?
Une solution consiste à les ignorer et à les laisser à la fonction de vérification côté serveur pour les vérifications finales. Si le navigateur ne reconnaît pas l'attribut required , une autre façon conviviale pour gérer cette situation est de créer un petit script pour vérifier les champs requis. Les instructions suivantes montrent comment effectuer des opérations correspondantes à l'aide de Modernizr.
</style> <script src=js/modernizr.js></script> </head> <script> séparé et créez un gestionnaire d'événements dès que la page sera chargée pour faciliter l'exécution du code:<script src=js/modernizr.js></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head autofocus et les propriétés required . La façon de gérer autofocus est simple:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it } Cette condition teste Modernizr.input.autofocus , si autofocus n'est pas pris en charge, la valeur renvoyée est false . Cependant, l'opérateur logique non (une marque d'exclamation) peut inverser la signification, donc si autofocus n'est pas pris en charge, le résultat d'évaluation de cette condition est true et inputs[0].focus() place le curseur dans le premier champ d'entrée.
required n'est pas pris en charge, ajoutez maintenant du code pour faciliter la vérification des champs requis. Le code complet du gestionnaire d'événements est le suivant:window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } } Le nouveau code produit une fonction qui, lors de la soumission du formulaire, il peut parcourir tous les éléments d'entrée pour trouver des champs avec les attributs required . Lorsqu'il trouve un champ, il supprime les blancs de début et de fin de la valeur, et si le résultat est une chaîne vide, il ajoute le résultat au tableau required . Une fois que tous les champs ont été vérifiés, si certains éléments sont inclus dans le tableau, le navigateur affiche un avertissement lié au nom de champ manquant et empêche le formulaire d'être soumis.
Remarque: Safari 5.1 a indiqué à tort qu'il prend en charge required , elle soumet donc le formulaire sans valider les champs requis. Il s'agit d'un défaut de safari, mais en modernizr, il n'existe pas.
Lorsque vous êtes prêt à déployer votre site Web, il est recommandé de créer une version de produit personnalisée de Modernizr qui ne contient que les éléments dont vous avez réellement besoin. Cela peut réduire la taille de la bibliothèque Modernizr de 44 Ko à 2 Ko selon les fonctionnalités que vous avez sélectionnées. La plage des options actuelles est illustrée à la figure 8.
Figure 8. La page de téléchargement Modernizr vous permet de sélectionner uniquement les fonctionnalités dont vous avez besoinLes options peuvent être facilement regroupées dans les catégories suivantes: CSS3, HTML5, Misc (elaneous) et supplémentaire. Cliquez sur le bouton basculer à côté des trois premiers titres pour sélectionner ou jeter toutes les cases à cocher dans la catégorie de sélection.
Par défaut, la catégorie supplémentaire sélectionnera les trois entrées suivantes:
Si vous sélectionnez une option dans la catégorie CSS3, les options de la catégorie supplémentaire suivante seront également sélectionnées:
Modernizr.testProp() Modernizr.testAllProps() Modernizr._domPrefixes()Ne désélectionnez pas ces options. Cela annulera automatiquement toutes les options que vous avez sélectionnées dans la catégorie CSS3.
MQ Polyfill (réponse.js) dans la catégorie supplémentaire a ajouté un script qui permet aux requêtes multimédias dans IE 6-8 pour obtenir un support limité. Lorsque vous sélectionnez cette option, il sélectionne automatiquement les requêtes multimédias et modernizr.testStyles (). Pour en savoir plus sur les requêtes multimédias Polyfill (réponse.js), visitez https://github.com/scottjehl/respond.
Seuls les utilisateurs avancés seront intéressés par d'autres options dans la catégorie supplémentaire. Pour plus de détails sur ce qu'ils sont et comment les utiliser, consultez la section d'extensibilité de la documentation Modernizr.
La description suivante décrit comment créer une version de produit personnalisée de Modernizr pour l'exemple de fichier. Cette version personnalisée est requise pour les exercices ultérieurs, qui montrera comment charger des fichiers JavaScript externes à l'aide de Modernizr.load() .
Lors de la création d'une version de production personnalisée de Modernizr, l'option contenant Modernizr.load() doit être sélectionnée par défaut. Modernizr.load() est un alias pour yepnope() , qui est un chargeur de script autonome développé de manière synchrone avec modernizr. Pour illustrer comment l'utiliser, je donne un exemple simple. J'ai déplacé le script correspondant de requis.html à check_required.js et apporté trois modifications mineures pour faciliter la suppression des tests Modernizr et l'avoir attribué à une variable appelée init . Le script révisé ressemble à ceci:
var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^/s+|/s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; }; Un grand avantage de Modernizr.load() est qu'il peut charger des scripts conditionnellement en fonction des résultats des capacités de navigateur de test - c'est pourquoi elle s'appelait yepnope() au début. Il peut charger des scripts externes de manière asynchrone - en d'autres termes, il peut charger des scripts externes une fois que le navigateur a chargé le modèle d'objet de document (DOM) - afin qu'il puisse aider à améliorer les performances de votre site Web.
La syntaxe de base de Modernizr.load() est de passer un objet avec les attributs suivants:
test : la propriété Modernizr que vous souhaitez détecter. yep : si le test est réussi, l'emplacement du script que vous souhaitez charger. Utilisez un tableau multi-script. nope : Si le test échoue, l'emplacement du script que vous souhaitez charger. Utilisez un tableau multi-script. complete : une fonction qui s'exécute dès qu'un script externe est chargé (facultatif). yep et nope sont facultatifs, tant que vous fournissez l'un d'eux.
Afin de charger et d'exécuter des scripts dans check_required.js, vous devez ajouter le bloc <script> suivant après que modernizr.adc.js a été joint à la page (le code est situé dans requis_load.html):
<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script> C'est exactement la même chose qu'auparavant, mais cela peut réduire le chargement de téléchargement des navigateurs qui prennent déjà en charge required .
Pour tester plusieurs conditions, vous pouvez passer un ensemble d'objets à Modernizr.load() . Pour plus de détails, consultez le didacticiel modernizr.load () sur la documentation Modernizr.
Modernizr est un outil puissant et utile, mais cela ne signifie pas que vous devez l'utiliser. Tous les cas ne sont pas nécessaires pour utiliser Modernizr pour fournir plusieurs styles au navigateur. Si votre objectif principal est Internet Explorer, envisagez d'utiliser des commentaires conditionnels IE. Vous pouvez également utiliser CSS Stack pour écraser certains styles. Par exemple, utilisez d'abord la couleur hexadécimale, puis remplacez-la avec rgba() ou hsla() . Les anciennes versions des navigateurs utiliseront la première valeur et ignoreront la deuxième valeur.
Modernizr devient vraiment une réalité lorsqu'elle est combinée avec des polyfills et d'autres JavaScript. Mais n'oubliez pas, il est généralement facile de créer vos propres tests qui conviennent aux fonctionnalités de support. Par exemple, ce qui suit est tout le code que vous testez si un navigateur prend en charge required (le code est situé dans requis_nomodernizr.html):
var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }Ce tutoriel a couvert toutes les principales caractéristiques de Modernizr. Pour plus d'informations sur ces fonctionnalités, veuillez vous référer à la documentation officielle correspondante, située à http://www.modernizr.com/docs/. De plus, vous pouvez trouver les ressources utiles suivantes:
yepnope() , qui a été fusionnée dans Modernizr.load() dans Modernizr. +