Mit der schnellen Entwicklung von HTML5 und CSS3 wurden immer mehr semantische Tags und coole Funktionen für die Entwicklung von Webanwendungen angewendet. Große Browserhersteller haben begonnen, diese neuen Funktionen zu unterstützen, und Webentwickler sind auch daran interessiert, diese neuen Funktionen auszuprobieren, um farbenfrohe und interessantere Anwendungen zu entwickeln. Die durch die ungleichmäßigen Unterstützung dieser neuen Funktionen (insbesondere der Kopfschmerz induzierenden IE) verursachten Versionen Kompatibilitätsprobleme sind jedoch immer ein Albtraum, der in den Köpfen von Entwicklern bleibt. Traditionelle Nutzungsgewohnheiten erschweren es uns, alte Versionen von Browsern aufzugeben, und Entwickler können nur langweilige manuelle Tests wählen, testen und dann testen.
Um dieses Problem zu lösen, entstand Modernizr. Sein Name klingt ein bisschen wie Modernisierung, und in der Tat stammt der Name aus dem Zweck, die Entwicklungserfahrung moderner zu machen, aber es ist kein Versuch, den alten Browser zu modernisieren, das heißt, er unterstützt diese neuen Merkmale (obwohl Sie den Browser -Unterstützung bestimmte neue Merkmale, die nicht unterstützt werden, durch Hinzufügen von Shim/Polyfill -Skripten, wie sie später behandelt werden, gestützt werden können).
Modernizr ist eine Open -Source -JS -Bibliothek, die die Unterstützung von Browsern für HTML5- und CSS3 -Funktionen erkennt. Die berühmte HTML5/CSS3 -Browser -Kompatibilitäts -Website Findmebyip basiert auf diesem Framework. Wir können es verwenden, um festzustellen, ob der Browser eine neue Funktion unterstützt, und sogar Skripte laden, um Ihre Anforderungen zu erfüllen, um verschiedene JS -Dateien dynamisch nach verschiedenen Situationen zu laden, um Downloads zu reduzieren und die Leistung zu verbessern.
Modernizr bietet zwei Versionen: Entwicklung und Produktion. Die Entwicklungsversion beinhaltet die Erkennung aller neuen HTML5- und CSS3 -Funktionen, die zum Lernen und Test geeignet sind. Für Anfänger, die gerade erst anfangen, Modernizr zu verwenden, empfiehlt Bella, dass Sie diese Version verwenden. Sobald Sie mit dem Arbeitsprinzip von Modernizr vertraut sind, können Sie die benutzerdefinierte Produktionsversion verwenden. Sie können nur so viele Funktionen herunterladen, die Sie erkennen müssen, um die Anzahl der Downloads erheblich zu reduzieren, was die Leistung Ihres Programms in gewissem Maße leicht verbessern kann. Sie können diese beiden Versionen unter http://modernizr.com/download/ herunterladen, auf die Entwicklung der Entwicklungsversion auf der Seite klicken, um die Entwicklungsversion herunterzuladen, oder Sie haben die folgende Feature -Anzeigeseite gesehen
Sie können jede HTML5- oder CSS3 -Funktion überprüfen, die Sie testen möchten. Standardmäßig wird die zusätzliche Kategorie wie folgt ausgewählt:
A) HTML5 SHIV V3.6: Es fügt ein Skript hinzu-HTML5 SHIM IT erzwingt IE6-8, HTML5-Elemente korrekt zu entwerfen und zu drucken. Wenn Sie vorhaben, neue HTML5 -Semantik -Tags wie <Header>, <fouter>, <nav>, <Abschnitt>, <artikels> usw. zu verwenden, müssen Sie diese Option auswählen.
b) modernizr.load (yepnope.js): Es fügt einen optionalen Skriptlader hinzu, der in der Entwicklungsversion nicht enthalten ist. Es erhöht 3 KB Download. Wenn Sie es also nicht brauchen, können Sie es aufgeben, es auszuwählen.
c) CSS -Klassen hinzufügen: Sie fügt die Modernizr -Klasse zum Start -Tag hinzu. Wenn Sie Unterstützung für CSS3 -Funktionen erkennen möchten, müssen Sie diese Option auswählen.
Die Methode der Verwendung von Modernizr ist sehr einfach. Nachdem Sie die Entwicklungsversion heruntergeladen haben, müssen Sie die JS -Bibliotheksdatei nur in die Seite einführen, z. B.:
1 | < script type = text/javascript src = > js/modernizr.js script ></ |
Nach dem Hinzufügen der Modernizr -Referenz fügt das JS -Programm dem HTML -Element eine Charge von CSS -Klassennamen hinzu. Diese Klassennamen markieren, welche Funktionsunterstützung und welche Funktionen im aktuellen Browser nicht unterstützen. Wenn es es unterstützt, wird der entsprechende Feature -Name angezeigt. Wenn es nicht unterstützt wird, wird der Name ohne Feature angezeigt. Wenn der erkannte Browser beispielsweise den CSS3-Eigenschaftsboxshadow unterstützt, wird Modernizr die BoxShadow-Klasse zum Tag hinzufügen, ansonsten wird die No-BoxShadow-Klasse hinzugefügt. Die folgende Abbildung zeigt die Unterstützung für neue HTML5- und CSS3 -Funktionen auf Chrome 23.0.1271.64.
Dann müssen Sie nur die entsprechenden Stilinformationen in Ihrem CSS -Stilblatt definieren. Sie können sie wie unten definieren:
1 | .boxshadow #MyContainer { |
2 | border : none ; |
3 | -webkit-box-shadow: #666 1px 1px 1px ; |
4 | -moz-box-shadow: #666 1px 1px 1px ; |
5 | } |
6 | .no-boxshadow #MyContainer { |
7 | border : 2px solid black ; |
8 | } |
Da der Browser die nicht unterstützte CSS3-Funktion ignoriert und die aktuelle Browserversion die Eigenschaft BoxShadow nicht unterstützt, ignoriert er die BoxShadow-Klasse und bezieht sich stattdessen auf die Stile, die im No-BoxShadow-Klasse definiert sind.
Wenn in Ihrem Anwendungsszenario Sie feststellen müssen, ob eine neue Funktion im Programm unterstützt und eine andere Verarbeitungslogik angegeben wird, können Sie auch Modernizr verwenden, um Urteile leicht zu fällen. Zu diesem Zeitpunkt müssen Sie ein globales Objekt namens Modernizr verwenden, das von Modernizr erstellt wurde. Der Inhalt ist eine Liste der booleschen Ergebnisse für jede erkannte Funktion. Wenn der Browser die BoxShadow -Eigenschaft unterstützt, ist der Wert von Modernizr.BoxShadow wahr, sonst ist er falsch. Nach der Einführung der Bibliotheksdatei können Sie daher auch diese Methode verwenden, um die Unterstützung des Browsers für diese Funktion zu erkennen. Dieses JS -Objekt enthält auch detailliertere Informationen für bestimmte Funktionen. Zum Beispiel wird Ihnen Modernizr.video.h264 erfahren, ob der Browser diesen Sondercodec unterstützt, und Modernizr.inputTypes.Search wird Ihnen mitteilen, ob der aktuelle Browser den neuen Sucheingangstyp unterstützt.
Wenn Modernizr nicht die Funktionen enthält, die Sie erkennen müssen, können Sie die von Modernizr eingekapselte Addtest -Funktion zum Testen aufrufen. Für verschiedene HTML5- und CSS3 -Funktionen finden wir viele der bereits geschriebenen Addtest -Funktionen auf GitHub (aus irgendeinem Grund ist Modernizr blockiert und das Projekt wird jetzt auf Github gehostet). Schauen wir uns ein einfaches Beispiel an. Wenn Sie testen möchten, ob der Browser die GotUSerMedia -API (API in der neuen WebRTC -Technologie) unterstützt, können Sie die folgende Addtest -Funktion zum Testen schreiben:
1 | Modernizr.addTest( 'getusermedia' , !!Modernizr.prefixed( 'getUserMedia' , navigator)); |
Ich glaube, dass Sie nach einer kurzen Einführung bereits die Bequemlichkeit erlebt haben, die Modernizr zur Entwicklung bringen kann. Nachdem Sie die Funktionen von Modernizr und der Verwendung von Modernizr verstanden haben, können Sie auch viel neues Wissen lernen, indem Sie seinen Quellcode betrachten und sich mit seinen Implementierungsprinzipien vertraut machen. Obwohl Bella in dieser Hinsicht ein Neuling ist, hat sie immer noch Erfahrungen mit Ihnen beim Lesen des Quellcodes.
Bella erwähnte das globale Objekt früher. Wie wird es in Modernizr erstellt? Schauen wir uns den folgenden Quellcode an:
1 | window.Modernizr = ( function ( window, document, undefined) { |
2 | var ...; |
3 | Modernizr = {}; |
4 | ... |
5 | return Modernizr; |
6 | })( this , this .document); |
Dieser Teil des Codes verwendet eine asynchrone Funktion, um einen Namespace zu generieren (obwohl es in JS keinen echten Namespace gibt), und die Funktion gibt ein Modernizr -Objekt zurück, das Windows.Mordernizr zugeordnet ist, damit andere JS -Programme direkte Fenster verwenden können. Der Parameter, der in die Funktion übergeben wird, wenn die Funktion aufgerufen wird, bezieht sich auf die Kontextumgebung der Funktionsausführung, dh das globale Fensterobjekt.
Wie testet Modernizr die Unterstützung für neue Funktionen von CSS3? Es stellt sich heraus, dass Modernizr zuerst ein DOM -Objekt erstellt und dann die Stilattribute unter diesem Objekt verwendet, um zu testen, ob es die neuen CSS3 -Funktionen unterstützt. Der Code ist wie folgt:
1 | var mod = 'modernizr' , |
2 | modElem = document.createElement(mod), |
3 | mStyle = modElem.style; |
Für den Browser können wir es stylen, ob es unser neu erstelltes HTML -Tag erkennen kann oder nicht, damit wir das neu erstellte Tag hier stylen können. Angenommen, wir möchten testen, ob der Browser HSLA unterstützt, um Farben in CSS zu definieren. Wir können zuerst einen Stil mit dem HSLA -Attribut schreiben, das angewendet wird, um ihn unter das Etikett zu setzen, und dann überprüfen, ob der Stilwert HSLA -Zeichenfolgen enthält. Wenn der Browser es nicht unterstützt, wird es keine HSLA -Zeichenfolgen geben (da die Aktion, den Stil mit dem auf das Modernizr -Tag angewendeten HSLA -Attribut zu setzen, überhaupt nicht wirksam wird). Wir können den folgenden Code schreiben:
1 | tests[ 'hsla' ] = function () { |
2 | setCss('background-color:hsla(120,40%,100%,.5) '); |
3 | return contains(mStyle.backgroundColor, 'rgba' ) || |
4 | contains(mStyle.backgroundColor, 'hsla' ); |
5 | }; |
Da einige Browser die Notation von HSLA in RGBA konvertieren, überprüfen wir auch, ob es die RGBA -String gibt.
Für CSS -Attribute mit dem Präfix des Anbieters müssen wir unterschiedliche Behandlungen angeben. Durch die Rückkehr in die BoxShadow -Eigenschaft wird Modernizr getestet, ob es BoxShadow-, WebkitboxShadow-, MozboxShadow-, Oboxshadow-, MsboxShadow- oder KHTMLBoxShadow -Eigenschaften unter der oben erstellten MStyle -Variablen gibt. Wenn ja, bedeutet dies, dass der Browser diese Eigenschaft unterstützt. Hier verwenden wir hauptsächlich zwei modernisierte Funktionen, eine testProp () und der andere ist TestAllProps (). Modernizr.TestProp (STR) gibt zurück, ob eine bestimmte Style -Immobilie anerkannt werden kann, während Modernizr.TestallProps (STR) zurückgibt, ob eine bestimmte Style -Immobilie anerkannt werden kann oder ob eine Style -Eigenschaft mit einem Anbieter -Präfix anerkannt werden kann.
Für mehr Quellcodekenntnisse werde ich es Ihnen vorstellen, nachdem Bella in Zukunft eine umfassendere Forschung hat. Bella glaubt, dass Sie, wenn Sie mit den Prinzipien und der Verwendung von Modernizr vertraut sind, Sie auf jeden Fall helfen wird, die Entwicklungseffizienz zu verbessern.
Schließlich fasst Bella kurz einige Materialien zusammen, die jeder von Modernizr lernen kann:
1. Modernizr Offizielle Website: http://modernizr.com/docs/ Sie können Modernizr -Wissen, Quellcode lernen und Modernizr davon herunterladen.
2. Modernizr Test Suite URL: http://modernizr.github.com/modernizr/test/index.html Sie können den Unterstützungsstatus von HTML5- und CSS3 -Funktionen jedes Browsers oben abfragen. Die Abfragemethode:
Klicken Sie am Ende dieser Seite die Ref -Tests von Caniuse und Modernizr anzeigen und klicken Sie dann auf eine der Tabellenlinks für die getesteten HTML5- oder CSS3 -Funktionen, um die Unterstützung jedes Browsers anzuzeigen.
3..
4. Laden Sie Adressen verschiedener Addtest -Funktionen herunter, die neue HTML5- und CSS3 -Funktionen erkennen:
https://github.com/modernizr/modernizr/tree/master/feature-detects
Dieser Artikel stammt aus Tencent Wuhan Blog. Bitte geben Sie die Quelle beim Nachdruck an