Dites-nous comment utiliser Modernizr

Auteur：Eve Cole Date de mise à jour：2025-08-23 02:32:01

Il existe déjà de nombreuses introductions chinoises sur Modernizr, vous pouvez rechercher à travers Baidu ou Gu Ge. Vous pouvez également le lire sur Blue Ideal, cet article est relativement complet: modernizr né pour HTML5 et CSS3;

Quelles sont les utilisations de Modernizr en plus de fournir un jugement de base en environnement et un soutien sémantique pour HTML5 et CSS3? Apprenons-le ensemble aujourd'hui.

1. Commencez par appliquer Modernizr

Cette partie est expliquée en détail dans Modernizr née pour HTML5 et CSS3, y compris les changements dans les éléments HTML après les courses Modernizr, etc. Il est recommandé que les nouveaux étudiants puissent le lire attentivement.

Vous pouvez également vous rendre directement sur le site officiel http://modernizr.com/docs/ pour plus d'informations.

2. Utilisation de modernizr.load

1. Chargez jQuery

Voyons d'abord les méthodes et les codes de chargement jQuery sur le site officiel:

Modernizr.load ([{
Load: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complet: function () {
if (! window.jquery) {
Modernizr.load ('js / libs / jquery-1.7.1.min.js');
}
}
}]);

Ce code a été testé et a constaté que si vous ne pouvez pas accéder au CDN fourni par Google normalement, le navigateur rapportera une erreur et le message est

Gethttp: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404 (Notfound)
Modernizr.Custom.js: 4ResourceInterpretedasimageButTransferred with MimetypeApplication / X-Javascript: JS / Libs / JQuery-1.7.1.min.js.

D'après les informations de rétroaction, nous pouvons voir que le format de fichier analysé par Modernizr lors du rechargement de jQuery local est incorrect. Je ne sais pas si cela se produira, mais cela affecte l'utilisation. Parmi tous les résultats de recherche chinois, aucune explication ou recherche sur ce phénomène n'a été trouvée et les capacités personnelles étaient limitées, il était donc impossible d'étudier en profondeur. Je viens de recevoir une solution temporaire de Stackoverflow, le code est le suivant:

<ScriptType = text / javascript> // <! [cdata [
Modernizr.load ([{
Load: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
complet: function () {
if (! window.jquery) {
Modernizr.load ([{
chargement: 'js / jquery.min.js',
rappel: fonction (url, résultat, clé) {
//console.log('jQueryOnLocalWasloaded! ');
init ();
}
}]);
}autre{
//console.log('jqueryongoglewasloaded! ');
init ();
}
}
}]);
functionInit () {
jQuery (document) .ready (function () {
$ ('body'). prend ('helloworld!');
});
}
//]]> </ script>

2. Prise en charge des diagrammes PNG à version inférieure IE

Dans la description de la documentation de Yepnopejs, il y a une section sur l'utilisation de plug-ins pour IE! Préfixe.

La plupart du temps, lorsque nous faisons une compatibilité des interfaces frontales, nous devons considérer les détails des différentes versions de IE. Bien que nous soulignons maintenant l'abandon de IE6, la plupart des clients utilisent toujours cette version. Afin d'assurer la cohérence de l'interface, nous pouvons généralement voir le code de format suivant:

<! - [ifltie7]> <htmlclass = ie6> <! [endif] ->
<! - [ifie7]> <htmlclass = ie7> <! [endif] ->
<! - [ifie8]> <htmlclass = ie8> <! [endif] ->
<! - [ifie9]> <htmlclass = ie9> <! [endif] ->
<! - [if (gtie9) |! (ie)]> <! -> <! - <! [endif] ->

Il s'agit d'une déclaration de format conditionnel pour le filtrage du filtrage autorisé dans HTML. Grâce au filtrage, nous pouvons réaliser certains hacks CSS pour différentes versions de IE. Cette partie du contenu peut être lue et étudiée sur Paulirish.com.

Il existe de nombreuses solutions aux diagrammes PNG transparents. Voici quelques tentatives pour introduire le segment de code JS pour résoudre la PNG transparente via Modernizr. Le code spécifique est le suivant:

<ScriptType = text / javascript> // <! [cdata [
Modernizr.load ([
{
Charge: 'js / yepnope.ie_prefix.js', // Chargez le plugin IE!
complet: function () {
yepnope ([{
Charge: 'ielt8! JS / IE_PNG.js', // Le plug-in ne peut être filtré qu'après le chargement normal (chargez ie_png.js pour les versions ci-dessous IE8)
complet: function () {
ie_png.fix ('img');
}
}]);
}
}
]));
//]]> </ script>

C'est une tentative intéressante.

3. Déterminez la prise en charge du navigateur pour CSS3 ou HTML5

Cette partie est la caractéristique de base de Modernizr. En utilisant ces fonctionnalités de base, nous pouvons non seulement essayer de nouvelles fonctionnalités de CSS3 ou HTML5, mais nous assurons également de donner des invites amicales dans des environnements non pris en charge. Jetez un œil au code suivant:

<ScriptType = text / javascript> // <! [cdata [
Modernizr.load ({
Test: modernizr.csstransforms3d & # 038; & modernizr.csstransitions, // juger si le client actuel prend en charge les variantes tridimensionnelles et les transitions de gradient
yep: ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' ,'js/jquery.hoverfold.js'], // si pris en charge, chargez JS lié
Non: «CSS / Fallback.css», // Autres Chargez les styles pertinents utilisés pour les rappels conviviaux
rappel: fonction (URL, résultat, clé) {// contenu de rappel
if (url === 'js / jquery.hoverfold.js') {// Si le chemin du dernier fichier JS chargé est le même, l'application
$ ('# grid'). hoverfold ();
}
}
});
//]]> </ script>

Ce code est coupé d'un paragraphe dans le document de présentation dans les effets de survol de la fourche 3D. En analysant et en expérimentant les tutoriels produits par l'auteur, nous pouvons non seulement apprendre une partie de l'utilisation de Modernizr, mais aussi vivre certains des effets puissants et éblouissants de CSS3.

Le contenu ci-dessus est encore très grossièrement organisé, et le but est de l'utiliser pour apprendre et comprendre les caractéristiques et les méthodes d'utilisation de Modernizr (Yepnope). Dans le même temps, nous devons également améliorer l'apprentissage et l'attention de CSS3 et HTML5.

L'ensemble du texte est terminé.