Erzählen Sie uns, wie Sie Modernizr verwenden können

Autor：Eve Cole Aktualisierungszeit：2025-08-23 02:32:01

Es gibt bereits viele chinesische Einführungen in Modernizr, Sie können über Baidu oder Gu Ge suchen. Sie können es auch auf Blue Ideal lesen. Dieser Artikel ist relativ umfassend: Modernizr geboren für HTML5 und CSS3;

Was sind die Verwendungen von Modernizr zusätzlich zur Bereitstellung grundlegender Umwelturteils und semantischer Unterstützung für HTML5 und CSS3? Lassen Sie es uns noch heute gemeinsam lernen.

1. Beginnen Sie mit der Anwendung von Modernizr

Dieser Teil wird in Modernizr-geboren für HTML5 und CSS3 ausführlich erklärt, einschließlich Änderungen der HTML-Elemente nach Modernizr-Läufen usw. Es wird empfohlen, dass neue Schüler ihn sorgfältig lesen können.

Sie können auch direkt zur offiziellen Website http://modernizr.com/docs/ gehen, um weitere Informationen zu erhalten.

2. Verwendung von Modernizr.load

1. Laden Sie JQuery

Schauen wir uns zunächst die Methoden und Codes zum Laden von JQuery auf der offiziellen Website an:

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

Dieser Code wurde getestet und ermittelt, dass der Browser einen Fehler meldet, wenn Sie nicht auf die von Google bereitgestellte CDN zugreifen können, und die Nachricht ist

Gethttp: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js404 (NotFound)
modernizr.custom.js: 4ResourceinterpretedaSimageButTransferred mit MimetypeApplication/X-JavaScript: JS/libs/jQuery-1.7.1.Min.js.

Aus den Feedback -Informationen können wir feststellen, dass das von Modernizr analysierte Dateiformat beim Nachladen lokaler JQuery falsch ist. Ich weiß nicht, ob dies passieren wird, aber dies wirkt sich auf die Verwendung aus. Unter allen chinesischen Suchergebnissen wurde keine Erklärung oder Forschung zu diesem Phänomen gefunden, und die persönlichen Fähigkeiten waren begrenzt, sodass es unmöglich war, ausführlich zu untersuchen. Ich habe gerade eine vorübergehende Lösung von Stackoverflow erhalten. Der Code lautet wie folgt:

<scriptType = text/javaScript> // <! [cdata [
Modernizr.load ([{{{
Laden: 'http: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',,
vollständige: function () {
if (! window.jQuery) {
Modernizr.load ([{{{
Laden: 'JS/jQuery.min.js',
Rückruf: Funktion (URL, Ergebnis, Schlüssel) {
//console.log('JQueryonLocalWaSloaded! ');
init ();
}
}]);
}anders{
//console.log('JQueryongoglewas geladen! ');
init ();
}
}
}]);
functionInit () {
JQuery (Dokument) .Ready (function () {
$ ('Body'). Prepend ('HelloWorld!');
});
}
//]]> </script>

2. Unterstützung für die niedrigere Version, dh abgefangene PNG -Diagramme

In der Dokumentationsbeschreibung von YepnopeJs gibt es einen Abschnitt über die Verwendung von Plug-Ins für IE! Präfix.

Meistens, wenn wir Front-End-Schnittstellenkompatibilität erstellen, müssen wir die Details verschiedener Versionen des IE berücksichtigen. Obwohl wir jetzt die Aufgabe von IE6 betonen, verwenden die meisten Kunden diese Version immer noch. Um die Konsistenz der Schnittstelle zu gewährleisten, können wir normalerweise den folgenden Formatcode sehen:

<!-[ifltie7]> <htmlclass = ie6> <! [endif]->
<!-[iFie7]> <htmlClass = IE7> <! [endif]->
<!-[iFie8]> <htmlClass = ie8> <! [endif]->
<!-[iFie9]> <htmlClass = IE9> <! [endif]->
<!-[if (gtie9) |! (dh)]> <!-> <!-<! [endif]->

Dies ist eine bedingte Formatanweisung zur Filterung der in HTML zulässigen Filterung. Durch Filterung können wir einige CSS -Hacks für verschiedene Versionen von IE erreichen. Dieser Teil des Inhalts kann auf Paulirish.com gelesen und studiert werden.

Es gibt viele Lösungen für transparente PNG -Diagramme. Hier sind einige Versuche, das JS -Code -Segment einzuführen, um transparentes PNG durch Modernizr zu lösen. Der spezifische Code lautet wie folgt:

<scriptType = text/javaScript> // <! [cdata [
Modernizr.load ([
{
Laden: 'JS/yepnope.ie_prefix.js', // Laden Sie das IE! Präfix -Plugin von Yepnope
vollständige: function () {
yepnope ([{{{{
Laden: 'IELT8! JS/IE_PNG.JS', // Das Plug-In kann nur filtriert werden, nachdem es normal geladen wurde (laden Sie IE_PNG.js für Versionen unten IE8)
vollständige: function () {
ie_png.fix ('img');
}
}]);
}
}
]);
//]]> </script>

Dies ist ein interessanter Versuch.

3. Bestimmen Sie die Unterstützung des Browsers für CSS3 oder HTML5

Dieser Teil ist das Grundmerkmal von Modernizr. Mit diesen grundlegenden Funktionen können wir nicht nur neue Funktionen von CSS3 oder HTML5 ausprobieren, sondern auch sicherstellen, dass wir in nicht unterstützten Umgebungen freundliche Aufforderungen angeben. Schauen Sie sich den folgenden Code an:

<scriptType = text/javaScript> // <! [cdata [
Modernizr.load ({{
Test: modernizr.csstransforms3d & & modernizr.csstransitionen, // beurteilen Sie, ob der aktuelle Kunde dreidimensionale Varianten und Gradientenübergänge unterstützt
yep: ['http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js/jquery.hoverfold.js'], //, wenn unterstützt, ladungsbezogene JS ladet js
Nein: 'CSS/Fallback.css', // Andere laden die relevanten Stile, die für freundliche Erinnerungen verwendet werden
Rückruf: Funktion (URL, Ergebnis, Schlüssel) {// Rückrufinhalt
if (url === 'js/jquery.hoverfold.js') {// Wenn der Pfad der zuletzt geladenen JS -Datei gleich ist, die Anwendung
$ ('#Grid'). Hoverfold ();
}
}
});
//]]> </script>

Dieser Code wird aus einem Absatz im Präsentationsdokument in 3D -Miniatur -Schwebeflächeneffekten gesenkt. Durch die Analyse und Erleben der vom Autor produzierten Tutorials können wir nicht nur einen Teil der Verwendung von Modernizr lernen, sondern auch einige der mächtigen und schillernden Effekte von CSS3 erleben.

Der obige Inhalt ist immer noch sehr grob organisiert, und es besteht darin, ihn zu verwenden, um die Eigenschaften und Verwendungsmethoden von Modernizr (Yepnope) zu lernen und zu verstehen. Gleichzeitig müssen wir auch das Lernen und die Aufmerksamkeit von CSS3 und HTML5 verbessern.

Der ganze Text ist vorbei.