Einführung und Verwendung der js-Bibliothek Modernizr_Others

Herkömmliche Browser werden derzeit nicht vollständig ersetzt, was es für Sie schwierig macht, die neuesten CSS3- oder HTML5-Funktionen in Ihre Website einzubetten. Modernizr wurde ins Leben gerufen, um dieses Problem zu lösen. Als Open-Source-JavaScript-Bibliothek erkennt Modernizr die Unterstützung des Browsers für CSS3- oder HTML5-Funktionen. Anstatt zu versuchen, Funktionen hinzuzufügen, die ältere Browser nicht unterstützen, können Sie mit Modernizr das Seitendesign ändern, indem Sie optionale Stilkonfigurationen erstellen. Es kann auch benutzerdefinierte Skripte laden, um Funktionen zu simulieren, die ältere Browser nicht unterstützen.

Was ist Modernizr?

Modernizr ist eine Open-Source-JS-Bibliothek, die die Arbeit von Designern erleichtert, die basierend auf Unterschieden in den Besucherbrowsern (bezogen auf Unterschiede bei der Unterstützung neuer Standards) unterschiedliche Erfahrungsebenen entwickeln. Es ermöglicht Designern, die Funktionen von HTML5 und CSS3 in Browsern, die und CSS3 unterstützen, in vollem Umfang zu nutzen, während sie gleichzeitig Steuerelemente von anderen Browsern nutzen, die dies nicht unterstützen Diese neuen Technologien werden nicht geopfert.

Wenn Sie ein Modernizr-Skript in eine Webseite einbetten, erkennt es, ob der aktuelle Browser CSS3-Funktionen wie @font-face, border-radius, border-image, box-shadow, rgba() usw. unterstützt. , und gleichzeitig wird auch überprüft, ob die

HTML5-Funktionen unterstützt werden – wie Audio, Video, lokaler Speicher und die neuen -Tag-Typen und -Attribute. Basierend auf dem Erhalt dieser Informationen können Sie sie in Browsern verwenden, die diese Funktionen unterstützen, um zu entscheiden, ob Sie ein JS-basiertes Fallback erstellen oder einfach ein ordnungsgemäßes Downgrade für Browser durchführen möchten, die dies nicht unterstützen. Darüber hinaus kann Modernizr es dem IE auch ermöglichen, die Anwendung von CSS-Stilen auf HTML5-Elemente zu unterstützen, sodass Entwickler diese semantischeren Tags sofort verwenden können.

Modernizr ist einfach und benutzerfreundlich, aber nicht allmächtig. Der erfolgreiche Einsatz von Modernizr hängt weitgehend von Ihren CSS- und JavaScript-Kenntnissen ab. Das Hauptproblem bei der Verwendung von HTML 5 und CSS 3 ist nicht die Beliebtheit und die Unterschiede zwischen den Browsern, sondern das Verständnis, was diese Unterschiede überhaupt sind. Sobald dies herausgefunden wurde, können Entwickler mithilfe eleganter Degradationstechniken diese Einschränkungen umgehen. Aus diesem Grund greifen viele Entwickler auf das Open-Source-Projekt Modernizr zurück.

Modernizr

Anstatt die User-Agent-Zeichenfolge zu erkennen, verwendet es eine Reihe von Tests, um die Eigenschaften des Browsers zu bestimmen. In wenigen Millisekunden ist es in der Lage, über 40 Tests durchzuführen und die Ergebnisse als Eigenschaften in einem Objekt namens Modernizr aufzuzeichnen. Mithilfe dieser Informationen können Entwickler erkennen, ob eine Funktion, die sie verwenden möchten, vom Browser unterstützt wird, und entsprechend damit umgehen.

In Modernizr

Version 2.0 wird ein bedingter Ressourcenlader für JavaScript und CSS hinzugefügt. Der Ressourcenlader akzeptiert drei Parameter, von denen der erste ein Ausdruck ist, der die erforderlichen Funktionen auflistet. Der zweite Parameter ist eine Liste von JavaScript- und CSS-Dateien, die geladen werden sollen, wenn der Ausdruck „true“ zurückgibt. Der dritte Parameter ist eine Liste von Dateien, auf die zurückgegriffen werden kann, wenn die erforderliche Funktion nicht vorhanden ist. Zusätzlich zum sanften Abbau können Lader auch zum Einbringen von

Polyfills

verwendet werden. Bitte erlauben Sie mir, denjenigen zu erklären, die Pollyfill noch nicht kennen: „ein JavaScript-Shim, der die Standard-API für ältere Browser emuliert.“ Obwohl dieser Ansatz nicht immer empfohlen wird, können Pollyfills verwendet werden, um Unterstützung für die meisten HTML 5-Funktionen hinzuzufügen (von Modernizr erkannt). Hier werden Polyfills verwendet, um Lücken in der Browserfunktionalität zu schließen. Manchmal führt Modernizr diese Aufgabe nahtlos aus. Aber im Grunde handelt es sich dabei nur um einen Patch-Aufwand, sodass man sich nicht darauf verlassen kann, dass er genau die gleichen Ergebnisse liefert wie ein nicht anfälliger Browser.

Um die Leistung zu verbessern, können Entwickler Modernizr so anpassen, dass es die für ihre Website erforderlichen Tests durchführt. Dies kann über die Modernizr-Downloadseite erfolgen, auf der auch eine Liste der erkennbaren Funktionen angezeigt wird. Die Github-Website ist außerdem mit nicht erkennbaren Funktionen und möglichen Lösungen gekennzeichnet.

Modernizr wurde auf der Grundlage der Theorie der progressiven Verbesserung entwickelt und unterstützt und ermutigt Entwickler daher, ihre Websites Schicht für Schicht zu erstellen. Alles beginnt mit einer leeren Basis mit angewendetem Javascript, und erweiterte Anwendungsebenen werden nacheinander hinzugefügt. Da Sie Modernizr verwenden, können Sie leicht erkennen, was der Browser unterstützt.

Das Prinzip von Modernizr

Modernizr verwendet JavaScript, um die vom Browser unterstützten Funktionen zu erkennen. Anstatt jedoch JavaScript zum dynamischen Laden verschiedener Stylesheets zu verwenden, verwendet es eine sehr einfache Technik, bei der Klassen zum -Tag hinzugefügt werden. Es liegt dann an Ihnen als Designer, mithilfe von CSS-Kaskadierung den passenden Stil für das Zielelement bereitzustellen.

Wenn die Seite beispielsweise die Box-Shadow-Eigenschaft unterstützt, fügt Modernizr die Boxshadow-Klasse hinzu. Wenn es nicht unterstützt wird, wird es alternativ mithilfe der Klasse no-boxshadow hinzugefügt.

Da Browser CSS-Eigenschaften ignorieren, die sie nicht erkennen, können Sie die Box-Shadow-Eigenschaft sicher gemäß Ihren grundlegenden Stilregeln verwenden. Sie müssen jedoch einen separaten Nachkommen im folgenden Format für die Auswahl älterer Browser hinzufügen :

.no-boxshadow img { /* Stile für Browser, die Box-Shadow nicht unterstützen */ }

Nur ​​Browser, die Box-Shadow nicht unterstützen, verfügen über die No-Boxshadow-Klasse, sodass andere Browser diese Stilregel nicht anwenden.

In der folgenden Tabelle sind die von Modernizr verwendeten Klassennamen aufgeführt, um die Unterstützung für CSS3 anzuzeigen. Wenn eine Funktion nicht unterstützt wird, wird dem Namen der entsprechenden Klasse „no-“ vorangestellt.

CSS-Funktionen	Modernizr-Klasse (Eigenschaft)
@font-face	Schriftart
::before und ::after Pseudoelemente	generierter Inhalt
Hintergrundgröße	Hintergrundgröße
Rahmenbild	Rahmenbild
Grenzradius	Grenzradius
Kastenschatten	boxshadow
CSS-Animationen	Cssanimationen
CSS 2D-Transformationen	csstransforms
CSS 3D-Transformationen	csstransforms3d
CSS-Übergänge	CSS-Übergänge
Flexibles Boxlayout	Flexbox
Verläufe	csgradients
hsla()	hsla
Mehrspaltiges Layout	csscolumns
mehrere Hintergründe	Multiplegs
Deckkraft	Deckkraft
Reflexion	cssreflections
rgba()	rgba
Textschatten	Textschatten

Unabhängig davon, wo eine bestimmte CSS-Eigenschaft getestet wird, sind der Klassenname und der Eigenschaftsname identisch. Dazu müssen jedoch alle Bindestriche oder Klammern entfernt werden. Andere Klassen werden nach den CSS3-Modulen benannt, auf die sie verweisen.

Verwendung von Modernizr

1. Herunterladen

Laden Sie zunächst die neueste stabile Version von Modernizr von www.modernizr.com herunter. Fügen Sie es dem -Bereich der Seite hinzu:

2. Fügen Sie die Klasse „no-js“ zum hinzu

Wenn Modernizr ausgeführt wird, ändert es die Klasse „no-js“ in „js“, um Sie darüber zu informieren, dass es ausgeführt wird. Modernizr führt dies nicht nur durch, sondern fügt allen erkannten Funktionen auch Klassen hinzu. Wenn der Browser eine Funktion nicht unterstützt, fügt er dem Klassennamen, der der Funktion entspricht, ein „no-“ hinzu.

Durch das Hinzufügen der Klasse „no-js“ zum HTML-Element wird dem Browser mitgeteilt, ob es JavaScript unterstützt. Wenn es kein JavaScript unterstützt, wird „no-js“ angezeigt Wenn Sie an dieser Stelle den Live-Code von Dreamweaver verwenden, können Sie sehen, dass Modernizr eine große Anzahl von Klassen hinzugefügt hat, die Browserfunktionen angeben, wie unten gezeigt

Wie im Bild gezeigt, wurde die Klasse no-js durch die Klasse js ersetzt, was darauf hinweist, dass JavaScript aktiviert wurde.

Wenn Ihre Dreamweaver-Version keinen Live-Code hat (oder Sie einen anderen HTML-Editor verwenden), können Sie den generierten Code mit den Entwicklungstools der meisten modernen Browser oder mit Firebug des Firefox-Browsers überprüfen.

3. Anwendungsfall 1 – Schatten in Browsern anzeigen, die Schattenschatten unterstützen, und Standardrahmen in Browsern anzeigen, die dies nicht unterstützen

Code kopieren Der Code lautet wie folgt:

.boxshadow #MyContainer { border: none; -webkit-box-shadow: #666 1px 1px 1px -moz-box-shadow: #666 1px 1px 1px;

} .no-boxshadow #MyContainer { border: 2px solid black;
}

Denn wenn der Browser Box-Shadows unterstützt, fügt Modernizr die Boxshadow-Klasse zum -Element hinzu, und Sie können sie dann mit der ID eines entsprechenden Div verwalten. Wenn dies nicht unterstützt wird, fügt Modernizr die Klasse no-boxshadow zum -Element hinzu, sodass ein Standardrahmen angezeigt wird. Auf diese Weise können wir neue CSS3-Funktionen problemlos in Browsern verwenden, die CSS3-Funktionen unterstützen, und die vorherigen Methoden weiterhin in Browsern verwenden, die diese nicht unterstützen.

4. Anwendungsfall 2 – Testen des lokalen Speichers

Modernizr fügt nicht nur die entsprechende Klasse zum -Element hinzu, sondern stellt auch ein globales Modernizr-JavaScript-Objekt bereit, das verschiedene Attribute bereitstellt, um anzuzeigen, ob eine bestimmte neue Funktion vom aktuellen Browser unterstützt wird. Mit dem folgenden Code kann beispielsweise ermittelt werden, ob der Browser Canvas und lokalen Speicher unterstützt. Für mehrere Entwickler ist es sehr vorteilhaft, unter mehreren Browserversionen zu entwickeln und zu testen.

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

Jeder kann den Code vereinheitlichen

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

 }
});

Das globale Modernizr-Objekt kann auch verwendet werden, um zu erkennen, ob CSS3-Funktionen unterstützt werden. Der folgende Code wird verwendet, um zu testen, ob Border-Radius und CSS-Transformationen unterstützt werden:

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

Für Audio und Video ist der Rückgabewert eine Zeichenfolge, die den Konfidenzgrad angibt, mit dem der Browser den spezifischen Typ verarbeiten kann. Gemäß der HTML5-Spezifikation weist ein leerer String darauf hin, dass der Typ nicht unterstützt wird. Wenn der Typ unterstützt wird, ist der Rückgabewert „vielleicht“ oder „wahrscheinlich“. Zum Beispiel:

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

4. Anwendungsfall 3 – Verwenden Sie Modernizr, um HTML5-erforderliche Formularfelder zu validieren

HTML5 fügt viele neue Formularattribute hinzu, wie z. B. den Autofokus, der den Cursor beim ersten Laden der Seite automatisch in ein bestimmtes Feld setzt. Ein weiteres nützliches Attribut ist erforderlich, das HTML5-kompatible Browser daran hindert, das Formular abzusenden, wenn ein erforderliches Feld leer bleibt.

Abbildung 1. Skript erkennt erforderliche Felder in Browsern, die das neue Attribut nicht unterstützen

Abbildung 2. Skript erkennt erforderliche Felder in Browsern, die das neue Attribut nicht unterstützen

Vor dem Absenden des Formulars prüfen HTML5-kompatible Browser, ob Pflichtfelder ausgefüllt sind

Der Code generiert eine Funktion, die beim Absenden des Formulars alle Eingabeelemente durchläuft, um Felder mit dem erforderlichen Attribut zu finden. Wenn ein Feld gefunden wird, werden führende und nachgestellte Leerzeichen aus dem Wert entfernt. Wenn das Ergebnis eine leere Zeichenfolge ist, wird das Ergebnis dem erforderlichen Array hinzugefügt. Nachdem alle Felder überprüft wurden und das Array bestimmte Elemente enthält, zeigt der Browser eine Warnung über fehlende Feldnamen an und verhindert, dass das Formular gesendet wird.

Erstellen Sie eine benutzerdefinierte Version

Wenn Sie bereit sind, Ihre Website bereitzustellen, wird empfohlen, eine benutzerdefinierte Produktionsversion von Modernizr zu erstellen, die nur die Elemente enthält, die Sie tatsächlich benötigen. Dadurch wird die Größe der Modernizr-Bibliothek basierend auf Ihren ausgewählten Funktionen von 44 KB auf 2 KB reduziert. Der aktuelle Optionsumfang ist in der Abbildung dargestellt.

Zum Beispiel:

1. Klicken Sie auf http://www.modernizr.com/download/. Dadurch wird die oben gezeigte Oberfläche geöffnet.
2. Wählen Sie in der CSS3-Kategorie Box-Shadow und CSS-Spalten aus.
3. Wählen Sie in der Kategorie „HTML5“ die Option Eingabeattribute aus.
4. Deaktivieren Sie in der Kategorie „Extra“ die Option HTML5 Shim/IEPP.
5. Stellen Sie sicher, dass die folgenden Optionen in der Kategorie „Extra“ ausgewählt sind (sie sollten automatisch ausgewählt werden).
   • Modernizr.load(yepnope.js)
   • CSS-Klassen hinzufügen
   • Modernizr.testProp()
   • Modernizr.testAllProps()
   • Modernizr._domPrefixes

6. Klicken Sie auf die Schaltfläche „Generieren“.
7. Wenn das benutzerdefinierte Skript fertig ist (normalerweise innerhalb von ein bis zwei Sekunden), wird neben der Schaltfläche „Generieren“ eine Schaltfläche „Herunterladen“ angezeigt. Klicken Sie auf die Schaltfläche „Herunterladen“ und speichern Sie die Datei im js-Ordner der Beispielwebsite. Auf der Download-Seite erhält das Produktionsskript einen Dateinamen, z. B. modernizr.custom.79475.js. Vielleicht möchten Sie ihm aber auch einen aussagekräftigeren Namen geben. In der Beispieldatei habe ich den Namen modernizr.adc.js verwendet.
8. Ersetzen Sie die Links zu modernizr.js in css_support.html und require.html durch Links zu Ihrem benutzerdefinierten Produktionsskript. Beachten Sie, dass das Produktionsskript nur 5 KB groß ist, nicht die 44 KB der Entwicklungsversion.
9. Klicken Sie in css_support.html auf Live Code (oder verwenden Sie das Entwicklungstool in Ihrem Browser). Wie unten gezeigt, hat das öffnende -Tag nur noch drei Klassen.

Referenz:

• http://www.mhtml5.com/2011/03/676.html
• http://www.adobe.com/cn/devnet/dreamweaver/articles/using-modernizr.html
• http://zh.wikipedia.org/wiki/Modernizr
• http://modernizr.com/docs/