Introduction et utilisation de la bibliothèque js Modernizr_Others

Les navigateurs traditionnels ne seront pas complètement remplacés pour le moment, ce qui rendra difficile l'intégration des dernières fonctionnalités CSS3 ou HTML5 dans votre site Web. Modernizr a été créé pour résoudre ce problème. En tant que bibliothèque JavaScript open source, Modernizr détecte la prise en charge par le navigateur des fonctions CSS3 ou HTML5. Plutôt que d'essayer d'ajouter des fonctionnalités que les anciens navigateurs ne prennent pas en charge, Modernizr vous permet de modifier la conception de la page en créant des configurations de style facultatives. Il peut également charger des scripts personnalisés pour simuler des fonctions que les anciens navigateurs ne prennent pas en charge.

Qu'est-ce que Modernizr ?

Modernizr est une bibliothèque JS open source qui facilite le travail des concepteurs qui développent différents niveaux d'expérience en fonction des différences dans les navigateurs des visiteurs (faisant référence aux différences dans la prise en charge des nouvelles normes). Il permet aux concepteurs d'utiliser pleinement les fonctionnalités de HTML5 et CSS3 dans les navigateurs prenant en charge et CSS3, ainsi que les contrôles d'autres navigateurs qui ne prennent pas en charge ces nouvelles technologies ne sont pas sacrifiées.

Lorsque vous intégrez un script Modernizr dans une page Web, il détectera si le navigateur actuel prend en charge les fonctionnalités CSS3, telles que @font-face, border-radius, border-image, box-shadow, rgba(), etc. , et en même temps, il vérifiera également s'il prend en charge les fonctionnalités

HTML5 - telles que l'audio, la vidéo, le stockage local et les nouveaux types et attributs de balises Sur la base de l'obtention de ces informations, vous pouvez les utiliser sur les navigateurs prenant en charge ces fonctionnalités pour décider de créer une solution de secours basée sur JS ou simplement d'effectuer une rétrogradation progressive pour les navigateurs qui ne la prennent pas en charge. De plus, Modernizr peut également permettre à IE de prendre en charge l'application de styles CSS aux éléments HTML5, afin que les développeurs puissent immédiatement utiliser ces balises plus sémantiques.

Modernizr est simple et facile à utiliser, mais il n'est pas tout-puissant. L’utilisation réussie de Modernizr dépend en grande partie de vos compétences CSS et JavaScript. Le principal problème lié à l'utilisation de HTML 5 et CSS 3 n'est pas la popularité et les différences entre les navigateurs, mais la compréhension de ces différences en premier lieu. Une fois compris, les développeurs peuvent utiliser des techniques de dégradation gracieuse pour contourner ces limitations. Pour cette raison, de nombreux développeurs se tournent vers le projet open source Modernizr.

Modernizr

Au lieu de détecter la chaîne de l'agent utilisateur, il utilise une série de tests pour déterminer les caractéristiques du navigateur. En quelques millisecondes, il est capable d'effectuer plus de 40 tests et d'enregistrer les résultats sous forme de propriétés dans un objet appelé Modernizr. Les développeurs peuvent utiliser ces informations pour détecter si une fonctionnalité qu'ils envisagent d'utiliser est prise en charge par le navigateur et la gérer en conséquence.

Dans Modernizr

version 2.0 , il ajoute un chargeur de ressources conditionnelles pour JavaScript et CSS. Le chargeur de ressources accepte trois paramètres, dont le premier est une expression énumérant les fonctionnalités requises. Le deuxième paramètre est une liste de fichiers JavaScript et CSS à charger si l'expression renvoie vrai. Le troisième paramètre est une liste de fichiers sur lesquels s'appuyer si la fonctionnalité requise n'est pas présente. En plus de la dégradation gracieuse, les chargeurs peuvent également être utilisés pour introduire des

polyfills

. Permettez-moi d'expliquer à ceux qui ne sont pas encore familiers avec Pollyfill. Pollyfill est "une cale JavaScript qui émule l'API standard pour les navigateurs plus anciens". Bien que cette approche ne soit pas toujours recommandée, les pollyfills peuvent être utilisés pour ajouter la prise en charge de la plupart des fonctionnalités HTML 5 (détectées par Modernizr). Ici, les polyfills sont utilisés pour combler les trous dans les fonctionnalités du navigateur. Parfois, Modernizr effectue cette tâche de manière transparente. Mais au fond, il ne s’agit que d’un effort de correction, on ne peut donc pas compter sur lui pour produire exactement les mêmes résultats obtenus par un navigateur non vulnérable.

Pour améliorer les performances, les développeurs peuvent personnaliser Modernizr pour effectuer les tests requis pour leur site Web. Cela peut être fait via la Page de téléchargement Modernizr, qui affiche également une liste des fonctionnalités pouvant être détectées. Le site Web github est également marqué de fonctionnalités indétectables et de solutions possibles .

Modernizr est développé sur la base de la théorie de l'amélioration progressive, il soutient et encourage donc les développeurs à créer leurs sites Web couche par couche. Tout part d'une base vide avec Javascript appliqué, et des couches d'application améliorées sont ajoutées les unes après les autres. Parce que vous utilisez Modernizr, vous pouvez facilement savoir ce que le navigateur prend en charge.

Le principe du Modernizr

Modernizr utilise JavaScript pour détecter les fonctionnalités prises en charge par le navigateur. Cependant, au lieu d'utiliser JavaScript pour charger dynamiquement différentes feuilles de style, il utilise une technique très simple consistant à ajouter des classes à la balise C'est ensuite à vous, en tant que concepteur, de fournir le style approprié pour l'élément cible en utilisant la cascade CSS.

Par exemple, si la page prend en charge la propriété box-shadow, Modernizr ajoutera la classe boxshadow. S'il n'est pas pris en charge, il est ajouté en utilisant la classe no-boxshadow comme alternative.

Étant donné que les navigateurs ignorent les propriétés CSS qu'ils ne reconnaissent pas, vous pouvez utiliser en toute sécurité la propriété box-shadow selon vos règles de style de base, mais vous devrez ajouter un descendant distinct dans le format ci-dessous pour le sélecteur des navigateurs plus anciens. ：

.no-boxshadow img { /* styles pour les navigateurs qui ne prennent pas en charge box-shadow */ }

Seuls les navigateurs qui ne prennent pas en charge box-shadow auront la classe no-boxshadow, donc les autres navigateurs n'appliqueront pas cette règle de style.

Le tableau suivant répertorie les noms de classes utilisés par Modernizr pour indiquer la prise en charge de CSS3. Si une fonctionnalité n'est pas prise en charge, le nom de la classe correspondante est préfixé par no-.

Fonctions CSS	Classe Modernizr (propriété)
@font-face	fontface
::avante et ::après pseudo-éléments	contenu généré
taille de fond	taille de l'arrière-plan
bordure-image	bordureimage
bordure-rayon	bordureradius
boîte-ombre	boxshadow
Animations CSS	animationscss
Transformations CSS 2D	transformations css
Transformations CSS 3D	csstransforms3d
Transitions CSS	transitions css
Disposition flexible des boîtes	flexbox
dégradés	cssgradients
hsla()	hsla
mise en page multi-colonnes	colonnes css
arrière-plans multiples	plusieursbgs
opacité	opacité
réflexion	cssreflections
rgba()	rgba
texte-ombre	ombre de texte

Peu importe où une propriété CSS spécifique est testée, le nom de la classe et le nom de la propriété seront les mêmes, mais cela nécessite de supprimer tous les traits d'union ou parenthèses. D'autres classes portent le nom des modules CSS3 auxquels elles font référence.

Utilisation de Modernizr

1. Télécharger

Téléchargez d'abord la dernière version stable de Modernizr depuis www.modernizr.com. Ajoutez-le à la zone de la page :

2. Ajoutez la classe "no-js" à l'élément

Lorsque Modernizr est en cours d'exécution, il change la classe "no-js" en "js" pour vous informer qu'il est en cours d'exécution. Modernizr ne fait pas seulement cela, il ajoute également des classes à toutes les fonctionnalités qu'il détecte. Si le navigateur ne prend pas en charge une fonctionnalité, il ajoute « non- » au nom de classe correspondant à la fonctionnalité.

L'ajout de la classe no-js à l'élément html indique au navigateur s'il prend en charge JavaScript. S'il ne prend pas en charge JavaScript, il affichera no-js. S'il le prend en charge, supprimez no-js
. À ce stade, si vous utilisez Live Code de Dreamweaver, vous pouvez voir que Modernizr a ajouté un grand nombre de classes indiquant les fonctions du navigateur, comme indiqué ci-dessous

Comme le montre l'image, la classe no-js a été remplacée par la classe js, ce qui indique que JavaScript a été activé.

Si votre version de Dreamweaver ne dispose pas de Live Code (ou si vous utilisez un autre éditeur HTML), vous pouvez inspecter le code généré à l'aide des outils de développement fournis par la plupart des navigateurs modernes ou de Firebug fourni par le navigateur Firefox.

3. Cas d'utilisation 1 - Afficher l'ombre dans les navigateurs qui prennent en charge l'ombre et afficher les bordures standard dans les navigateurs qui ne la prennent pas en charge

Copier le code Le code est le suivant :

.boxshadow #MyContainer { border : aucun ; -webkit-box-shadow : #666 1px 1px 1px ; 
} .no-boxshadow #MyContainer { border: 2px solid black;
>

Parce que si le navigateur prend en charge box-shadows, Modernizr ajoutera la classe boxshadow à l'élément , et vous pourrez ensuite la gérer avec l'identifiant d'un div correspondant. Si cela n'est pas pris en charge, Modernizr ajoutera la classe no-boxshadow à l'élément afin qu'une bordure standard soit affichée. De cette façon, nous pouvons facilement utiliser les nouvelles fonctionnalités CSS3 sur les navigateurs prenant en charge les fonctionnalités CSS3, et continuer à utiliser les méthodes précédentes sur les navigateurs qui ne les prennent pas en charge.

4. Cas d'utilisation 2 - tester le stockage local

En plus d'ajouter la classe correspondante à l'élément , Modernizr fournit également un objet JavaScript Modernizr global, qui fournit différents attributs pour indiquer si une nouvelle fonctionnalité est prise en charge par le navigateur actuel. Par exemple, le code suivant peut être utilisé pour déterminer si le navigateur prend en charge le canevas et le stockage local. Il est très avantageux pour plusieurs développeurs de développer et de tester sous plusieurs versions de navigateurs.

<script> window.onload = function () { if (localStorageSupported()) {
   alert('local storage supported');
 }
};

　　function localStorageSupported() {
 　　try { 　　return ('localStorage' in window && window['localStorage'] != null);
 　　}catch(e) {}
 　　 return false;
} </script> 

Tout le monde peut unifier le code

 $(document).ready(function () { 
 if (Modernizr.canvas) { //Add canvas code } 
 if (Modernizr.localstorage) { 
 //script to run if local storage is 
 } else { 
 // script to run if local storage is not supported
  
 }
});

L'objet global Modernizr peut également être utilisé pour détecter si les fonctionnalités CSS3 sont prises en charge. Le code suivant est utilisé pour tester si les transformations border-radius et CSS sont prises en charge :

$(document).ready(function () { if (Modernizr.borderradius) {
  $('#MyDiv').addClass('borderRadiusStyle');
 } if (Modernizr.csstransforms) {
  $('#MyDiv').addClass('transformsStyle');
 }
}); 

Pour l'audio et la vidéo, la valeur de retour est une chaîne indiquant le niveau de confiance dans lequel le navigateur peut gérer le type spécifique. Selon la spécification HTML5, une chaîne vide indique que le type n'est pas pris en charge. Si le type est pris en charge, la valeur de retour est « peut-être » ou « probablement ». Par exemple :

if (Modernizr.video.h264 == "") { 
// h264 is not supported
}

4. Cas d'utilisation 3 - Utiliser Modernizr pour valider les champs de formulaire HTML5 obligatoires

HTML5 ajoute de nombreux nouveaux attributs de formulaire, tels que l'autofocus, qui place automatiquement le curseur dans un champ spécifié lors du premier chargement de la page. Un autre attribut utile est requis, ce qui empêchera les navigateurs compatibles HTML5 de soumettre le formulaire si un champ obligatoire est laissé vide.

Figure 1. Le script détecte les champs obligatoires dans les navigateurs qui ne prennent pas en charge le nouvel attribut

Figure 2. Le script détecte les champs obligatoires dans les navigateurs qui ne prennent pas en charge le nouvel attribut

Avant de soumettre le formulaire, les navigateurs compatibles HTML5 vérifieront si les champs obligatoires sont remplis

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) { //因如果不支持 autofocus，那么该条件的求值结果为 true，并且 inputs[0].focus() 将光标放在第一个输入字段 　　　　 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 code génère une fonction qui parcourt tous les éléments d'entrée lorsque le formulaire est soumis afin de trouver les champs avec l'attribut requis. Lorsqu'il trouve un champ, il supprime les espaces 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 requis. Une fois tous les champs vérifiés, si le tableau contient certains éléments, le navigateur affiche un avertissement concernant les noms de champs manquants et empêche la soumission du formulaire.

Créer une version personnalisée

Lorsque vous êtes prêt à déployer votre site Web, il est recommandé de créer une version de production personnalisée de Modernizr qui contient uniquement les éléments dont vous avez réellement besoin. Cela réduit la taille de la bibliothèque Modernizr de 44 Ko à 2 Ko en fonction des fonctionnalités sélectionnées. La gamme actuelle d'options est illustrée dans la figure.

Par exemple :

1. Cliquez sur http://www.modernizr.com/download/. Cela ouvrira l'interface illustrée ci-dessus.
2. Dans la catégorie CSS3, sélectionnez box-shadow et Colonnes CSS.
3. Dans la catégorie HTML5, sélectionnez Attributs d'entrée.
4. Dans la catégorie Extra, désélectionnez HTML5 Shim/IEPP.
5. Assurez-vous que les options suivantes sont sélectionnées dans la catégorie Extra (elles doivent être sélectionnées automatiquement).
   • Modernizr.load(yepnope.js)
   • Ajouter des classes CSS
   • Modernizr.testProp()
   • Modernizr.testAllProps()
   • Modernizr._domPrefixes

6. Cliquez sur le bouton Générer.
7. Lorsque le script personnalisé est prêt (généralement dans un délai d'une à deux secondes), un bouton Télécharger apparaîtra à côté du bouton Générer. Cliquez sur le bouton Télécharger et enregistrez le fichier dans le dossier js de l'exemple de site Web. La page de téléchargement donnera au script de production un nom de fichier, tel que modernizr.custom.79475.js, mais vous souhaiterez peut-être lui donner un nom plus significatif. Dans l'exemple de fichier, j'ai utilisé le nom modernizr.adc.js.
8. Remplacez les liens vers modernizr.js dans css_support.html et requirejs.html par des liens vers votre script de production personnalisé. Notez que le script de production ne fait que 5 Ko, et non les 44 Ko de la version de développement.
9. Cliquez sur Live Code dans css_support.html (ou utilisez l'outil de développement dans votre navigateur). Désormais, comme indiqué ci-dessous, la balise d'ouverture n'a que trois classes.

Référence :

• http://www.mhtml5.com/2011/03/676.html
• http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html
• http://zh.wikipedia.org/wiki/Modernizr
• http://modernizr.com/docs/