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.

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.

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

. 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-.

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

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

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

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

<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> 

 $(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
  
 }
});

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

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

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

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; 
　　　　} 
　　};
　} 
}