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.
ModernizrAu 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 Modernizrversion 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
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
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>
$(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
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.
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.
Référence :
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
