Herkömmliche Browser werden derzeit nicht vollständig ersetzt, was es Ihnen schwer macht, die neuesten CSS3- oder HTML5 -Funktionen in Ihre Website einzubetten. Modernizr entstand, um dieses Problem zu lösen. Als Open -Source -JavaScript -Bibliothek erkennt Modernizr die Browser -Unterstützung für CSS3- oder HTML5 -Funktionen. Modernizr versucht nicht, Funktionen hinzuzufügen, die nicht von älteren Browsern unterstützt werden, sondern ermöglicht es Ihnen, das Seitendesign zu ändern, indem Sie optionale Stilkonfigurationen erstellen. Es kann auch Funktionen simulieren, die nicht von älteren Browsern unterstützt werden, indem angepasste Skripte geladen werden.
Modernizr ist einfach zu bedienen, aber nicht allmächtig. Der erfolgreiche Einsatz von Modernizr hängt stark von Ihren CSS- und JavaScript -Fähigkeiten ab. Mit diesem Handbuch können Sie lernen, wie Sie optionale Stile für Browser festlegen, die keine Multi-Säulen oder Projektionen unterstützen. Darüber hinaus können Sie lernen, wie Sie ältere Browser erhalten, um Formulare zu validieren, die die neuesten HTML5 -Eigenschaften verwenden und Skriptdateien basierend auf der Funktionalität des Browsers selektiv laden.
Modernizr ist eine JavaScript -Bibliothek, die zur Erkennung von Browserfunktionalitätsunterstützung verwendet wird. Derzeit kann Modernizr die Verarbeitung einer Reihe von Tests durch den Browser durchsuchen, und kann 18 CSS3 -Funktionen und mehr als 40 Funktionen über HTML5 erkennen. Es ist zuverlässiger als herkömmliche Möglichkeiten, Browsernamen zu erkennen (Browserschnüffeln). Die Ausführungszeit eines vollständigen Tests dauert nur wenige Mikrosekunden. Darüber hinaus verwendet die Modernizr -Website benutzerdefinierte Skripte, um nur Elemente von Interesse zu erkennen und so eine Effizienzoptimierung zu erreichen.
Wenn Sie Modernizr zur Erkennung von CSS3 -Unterstützung verwenden, müssen Sie kein JavaScript -Wissen haben. Sie müssen nur eine Datei in die Webseite einfügen. Anschließend fügt sie dem <html> -Tag der Seite gemäß der Funktionalität des Browsers eine Reihe von Klassen hinzu. Die Namen der entsprechenden Klassen haben die Standardisierungsanforderungen erfüllt und sind leicht zu verstehen. Wenn der Browser beispielsweise die Box-Shadow-Eigenschaft unterstützt, müssen Sie die entsprechende BoxShadow-Klasse hinzufügen. Andernfalls fügen Sie eine No-Boxshadow-Klasse hinzu. Alles, was Sie tun müssen, ist eine Stiltabelle zu erstellen, die diese Klassen verwendet, um den entsprechenden Browser den richtigen Stil bereitzustellen.
Modernizr erleichtert die Implementierung von JavaScript -Lösungen, die als Polyfills bezeichnet werden - es simuliert HTML5 -bezogene Merkmale und Technologien wie Geolokalisierung. Sie müssen jedoch ein grundlegendes Verständnis von JavaScript haben, um diese Funktionen und Technologien zu verwenden. Der Begriff Polyfill stammt von einer britischen Tonmarke, die Risse füllt (d. H. Das Füllmaterial, das den Amerikanern bekannt ist). Hier wird Polyfill verwendet, um die Funktionen des Browsers auszufüllen. Manchmal führt Modernizr diese Aufgabe nahtlos aus. Dies ist jedoch im Wesentlichen nur ein Patching -Job, sodass Sie sich nicht darauf verlassen können, dass das gleiche Ergebnis eines gefährdeten Browsers erzielt wird.
Wie andere JavaScript -Bibliotheken bietet Modernizr Entwicklungs- und Produktionsversionen. Der einzige Unterschied zu den meisten Bibliotheken besteht darin, dass Räume und Kommentare aus der Produktionsversion entfernt wurden, wodurch die Größe der Downloads reduziert wird. Modernizr verfolgt einen anderen Ansatz. Die Entwicklungsversion kann in gewisser Weise als Waschbecken in einer Küche bezeichnet werden - sie enthält fast alles. Die Produktionsversion enthält nur die von Ihnen ausgewählten Elemente, die Downloads erheblich reduzieren können. In vielen Fällen kann die Produktionsversion auf die Größe der Entwicklungsversion auf ein Zweitzigster reduziert werden.
Beim Testen mit Modernizr empfehle ich Ihnen, die Entwicklungsversion herunterzuladen. Sobald Sie gemeistert haben, wie es funktioniert und seine Funktionen, können Sie eine benutzerdefinierte Produktionsversion für die Bereitstellung auf Ihrer Website herunterladen.
Die Beispieldatei für dieses Tutorial enthält die Entwicklung von Modernizr.
Hinweis: Wenn Sie versehentlich auf den Link Download im Hauptnavigationsmenü klicken, werden eine große Anzahl von Kontrollkästchen angezeigt, in denen Sie aufgefordert werden, das gewünschte Tool auszuwählen. Dies ist für die individuelle Produktionsversion eingestellt. Klicken Sie auf den Link zur Entwicklungsversion oben im Feld oder klicken Sie in Ihrem Browser auf die Schaltfläche zurück, um zur Startseite zurückzukehren, und wählen Sie die in Abbildung 1 gezeigte Entwicklungsschaltfläche aus.
Wie bereits erwähnt, versucht Modernizr nicht, älteren Browsern neue Funktionen hinzuzufügen, aber Sie können die fehlenden Funktionen in Ihrem Stil ausmachen. Um zu zeigen, wie dies funktioniert, enthält die Beispieldatei eine Seite namens CSS_Support_Begin.html. Wenn Sie diese Seite in einem neuen Browser laden, sollte sie wie Abbildung 2 aussehen.
Abbildung 2. Firefox 5 zeigt die Seite im Multi-Säulen-Format an und fügt dem Bild Schatten hinzu Der Stil dieser Seite besteht darin, column-count und box-shadow Eigenschaften von CSS3 zu verwenden, um den Text im Multi-Säulen-Format anzuzeigen und dem Bild Schatten hinzuzufügen. Ältere Versionen von Browsern unterstützen keine dieser Eigenschaften, daher sieht dieselbe Seite in Internet Explorer (dh) 7 wie Abbildung 3 aus.
In IE9 zeigt dieselbe Seite den Bildschatten, aber der Text entspricht dem in Abbildung 3 gezeigten Layout.
Was Sie in den Versuch einnehmen, fehlende Funktionen auszugleichen, hängt von den Anforderungen Ihres Entwurfsumlaufs ab. Es wird viel Arbeit beinhalten, um zu versuchen, die Seite in allen Browsern genau gleich aussehen zu lassen, aber Sie können einige einfache Verbesserungen vornehmen, z. B. den Text um das Bild um das Bild um das Bild, die linken Ränder des Bildes an den Text und das Hinzufügen von vagen Grenzen am unteren und rechten Bild des Bildes, damit es sich wie ein dreidimensionaler anfühlt.
Modernizr verwendet JavaScript, um die vom Browser unterstützte Funktionen zu erkennen. Anstatt JavaScript zu verwenden, um verschiedene Stylesheets dynamisch zu laden, verwendet es sehr einfache Techniken, um das <html> -Tag der Seite Klassen hinzuzufügen. Als Designer liegt es dann an Ihnen, sich für das CSS -Gehäuse zu entscheiden, um den entsprechenden Stil für die Zielelemente zu bieten. Wenn die Seite beispielsweise die box-shadow Eigenschaft unterstützt, fügt Modernizr boxshadow -Klasse hinzu. Wenn nicht unterstützt, wird es mit der no-boxshadow -Klasse als Ersatz hinzugefügt.
Da Browser die CSS-Eigenschaften ignorieren, die sie nicht erkennen können, können Sie box-shadow mit Vertrauen entsprechend Ihren grundlegenden Stilregeln verwenden. Sie müssen jedoch im folgenden Format einen separaten Nachkommensauswahl für ältere Browser hinzufügen:
.no-boxshadow img { /* styles for browsers that don't support box-shadow */ } Nur Browser, die box-shadow nicht unterstützen, haben no-boxshadow -Klasse, sodass andere Browser diese Stilregel nicht anwenden.
Fügen wir der Beispielseite Modernizr hinzu und überprüfen Sie die Klassen, die sie zum <html> -Tag hinzugefügt hat.
<!DOCTYPE HTML> <html> <!DOCTYPE HTML> <html class=no-js>Modernizr stützt sich auf JavaScript, die im Browser aktiviert sind. Wenn es aktiviert ist, wird diese Klasse dynamisch gelöscht. In seltenen Fällen ist JavaScript jedoch noch in HTML Makup vorhanden, wenn es nicht aktiviert ist, sodass Sie bei Bedarf spezielle Stilregeln für solche Besucher erstellen können.
</style> <script src=js/modernizr.js></script> </head> HINWEIS: Wenn Sie das Panel oder das Menü einfügen einfügen, fügt DreamWeaver dem Tag <Skript> -Tag type=text/javascript hinzu. Dies wird in HTML5 nicht mehr benötigt, aber das Beibehalten wird jedoch keinen Schaden verursachen.
HINWEIS: Wenn Ihre Dreamweaver -Version keinen Live -Code hat (oder Sie einen anderen HTML -Editor verwenden), können Sie den generierten Code mithilfe von Entwicklungstools überprüfen, die von den meisten neuen Browsern oder Firebug von Firefox -Browsern bereitgestellt werden.
Wie in Abbildung 4 gezeigt, wurde die no-js -Klasse durch js Klasse ersetzt, was darauf hinweist, dass JavaScript aktiviert wurde.
In Tabelle 1 sind die von Modernizr verwendeten Klassennamen aufgeführt, um die Unterstützung für CSS3 anzuzeigen. Wenn eine Funktion sie nicht unterstützt, wird der Name der entsprechenden Klasse mit no- .
Tabelle 1. CSS3 -Funktionen, die von Modernizr erkannt wurden
CSS -Funktionen | Modernizr -Klasse (Eigenschaften) |
@font-face | fontface |
::before und ::after Pseudoelementen | generatedcontent |
background-size | backgroundsize |
border-image | borderimage |
border-radius | borderradius |
box-shadow | boxshadow |
CSS -Animationen | cssanimations |
CSS 2D -Transformationen | csstransforms |
CSS 3D -Transformationen | csstransforms3d |
CSS -Übergänge | csstransitions |
Flexible Box -Layout | flexbox |
Gradienten | cssgradients |
hsla() | hsla |
Multi-Säulen-Layout | csscolumns |
Mehrere Hintergründe | multiplebgs |
opacity | opacity |
Spiegelung | cssreflections |
rgba() | rgba |
text-shadow | textshadow |
Unabhängig davon, wo ein bestimmtes CSS -Attribut getestet wird, sind der Unterrichtsname und der Eigenschaftsname gleich. Dies erfordert jedoch die Entfernung von Bindestrichen oder Klammern. Andere Klassen sind nach dem CSS3 -Modul benannt, auf das sie sich beziehen.
Siehe Tabelle 1, Sie können sehen, dass Modernizr boxshadow und csscolumns verwendet, um Unterstützung für box-shadow Eigenschaften bzw. Multi-Säulen-Layout zu zeigen. Daher können Sie die no-boxshadow und no-csscolumns -Klassen verwenden, um spezielle Stilregeln für Browser zu erstellen, die diese Funktionen nicht unterstützen.
Um sicherzustellen, dass die Richtlinie einfach ist, werde ich nur ein Beispiel für CSS -Deklarationen zeigen. Sie können sie direkt in die Codeansicht eingeben oder das neue Dialogfeld CSS -Regel verwenden.
.no-boxshadow img . #8A8A8A ). Die daraus resultierenden Stilregeln sollten so aussehen:.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }Dies ist nicht so attraktiv wie durchscheinende Schatten, aber trotzdem ermöglicht es dem Bild immer noch, leicht vom Hintergrund herauszukommen.
.no-csscolumns img . .no-csscolumns img { margin: 3px 8px 3px 0; float: left; } .columns img folgt. Die beiden Regeln haben die gleiche Besonderheit. Wenn sie also umgekehrt sind, kann der 10-Pixel-linke Rand .columns img die neue Regel, die Sie gerade erstellt haben, überschreiben. Sie können .no-csscolumns img in .no-csscolumns .columns img (Wenn Sie nicht sicher sind, wie genau die Besonderheit ist, lesen Sie den Artikel von Adrian Senior, Verständnis der Spezifität. Er wird lange veröffentlicht, aber es ist wertvoll.) In diesem einfachen Beispiel habe ich spezielle Stile für ältere Versionen von Browsern erstellt, indem ich nur die Klassen verwendete, die mit no- . Durch ihre Fähigkeit ist es jedoch absolut keinen Sinn, beide Klassen (mit oder ohne Präfixe) zu verwenden, um verschiedene Stile für Ihren Browser zu erstellen. Zum Beispiel:
.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }Manchmal ist dieser Ansatz beispielsweise vernünftig, wenn Sie für jede Stufe der Unterstützung ein völlig anderes Layout erstellen möchten. Aber wenn es nur darum geht, ausgewählbare Stile für ältere Browser bereitzustellen, vergessen Sie nicht, dass der Browser Eigenschaften ignoriert, die sie nicht erkennen. Wenn Sie die Modernizr-Klasse für alle Stile verwenden, wird Ihre Seite in einem von JavaScript-behinderten Browser vollständig nicht unbeholfen.
Modernizr fügt den Klassennamen für das Start <html> Tag hinzu, um einen doppelten Zweck zu spielen. Wenn die Seiten geladen werden, sind sie auch die Namen der vom Modernizr -Objekt erstellten JavaScript -Eigenschaften. Tabelle 1 listet die Namen von Klassen und Attributen in Bezug auf CSS auf. In Tabelle 2 sind die verbleibenden Klassen und Attribute in Bezug auf HTML5 und verwandte Technologien wie geografische Standorte aufgeführt.
Tabelle 2. HTML5-bezogene Merkmale, die von Modernizr erkannt wurden
HTML5 -Funktionen | Modernizr -Klasse (Eigenschaften) |
Anwendungscache | applicationcache |
Audio | audio. type (ogg, mp3, wav, m4a) |
Leinwand | canvas |
Leinwandtext | canvastext |
Ziehen und Drop | draganddrop |
Formulareingangsattribute | input. attributeName |
Formulareingangselemente formen | inputtypes. elementName |
Geolokalisierung | geolocation |
Hashchange -Event | hashchange |
Geschichtsmanagement | history |
Indexeddb | indexeddb |
Inline SVG | inlinesvg |
Lokale Speicherung | localstorage |
Nachrichten | postmessage |
Sitzungspeicher | sessionstorage |
Lächeln | smil |
Svg | svg |
SVG -Clippfade | svgclippaths |
Berührenereignisse | touch |
Video | video. type (ogg, webm, h264) |
Webgl | webgl |
Web -Sockeln | websockets |
Web SQL -Datenbank | websqldatabase |
Webarbeiter | webworkers |
In den meisten Fällen geben alle in Tabelle 1 und Tabelle 2 aufgeführten Attribute true oder false zurück. Sie können also den lokalen Speicher mit JavaScript wie unten gezeigt testen:
if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported } In Bezug auf audio und video ist der Rückgabewert jedoch eine Zeichenfolge, die angibt, dass der Browser eine bestimmte Art von Konfidenzniveau verarbeiten kann. Nach der HTML5 -Spezifikation bedeutet eine leere Zeichenfolge, dass der Typ nicht unterstützt wird. Wenn dieser Typ unterstützt wird, ist der Rückgabewert möglicherweise oder wahrscheinlich. Zum Beispiel:
if (Modernizr.video.h264 == ) { // h264 is not supported } HTML5 fügt viele neue Formeigenschaften hinzu, wie zum Beispiel autofocus , wodurch der Cursor automatisch in ein bestimmtes Feld gelegt wird, wenn die Seite zum ersten Mal geladen wird. Eine weitere nützliche Eigenschaft ist required , die verhindern, dass HTML5-kompatible Browser Formulare einreichen, wenn ein erforderliches Feld leer bleibt (siehe Abbildung 6).
Das ist großartig, aber es wird Sie eine Frage hinterlassen: Was sollten Sie mit älteren Versionen Ihres Browsers tun?
Eine Lösung besteht darin, sie zu ignorieren und die Server-Seite-Überprüfungsfunktion für endgültige Überprüfungen zu überlassen. Wenn der Browser das required Attribut nicht erkennt, besteht eine andere benutzerfreundliche Möglichkeit, diese Situation zu behandeln, darin, ein kleines Skript zu erstellen, um die erforderlichen Felder zu überprüfen. Die folgenden Anweisungen zeigen, wie sie mithilfe von Modernizr entsprechende Operationen ausführen.
</style> <script src=js/modernizr.js></script> </head> <script> -Block und erstellen Sie einen Ereignishandler, sobald die Seite geladen wird, um die Codeausführung zu erleichtern:<script src=js/modernizr.js></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head autofocus und required Eigenschaften nicht erkennt. Der Weg, um mit autofocus umzugehen, ist einfach: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) { inputs[0].focus(); } // if required not supported, emulate it } Dieser Zustand testet Modernizr.input.autofocus , wenn autofocus nicht unterstützt wird, ist der zurückgegebene Wert false . Der logische Operator nicht (ein Ausrufezeichen) kann die Bedeutung jedoch umkehren. Wenn also autofocus nicht unterstützt wird, ist das Bewertungsergebnis dieser Bedingung true , und inputs[0].focus() platziert den Cursor im ersten Eingabefeld.
required nicht unterstützt wird, wird nun Code hinzugefügt, um die erforderlichen Felder zu überprüfen. Der vollständige Code des Event -Handlers lautet wie folgt: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) { 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; } }; } } Der neue Code erzeugt eine Funktion, die beim Übermitteln des Formulars über alle Eingabelemente itereriert wird, um Felder mit required Attributen zu finden. Wenn es ein Feld findet, entfernt es den Anfang und die Beendigung von Rohlingen aus dem Wert, und wenn das Ergebnis eine leere Zeichenfolge ist, fügt es das Ergebnis required Array hinzu. Nachdem alle Felder überprüft wurden, zeigt der Browser eine Warnung im Zusammenhang mit dem fehlenden Feldnamen an und verhindert, dass das Formular eingereicht wird.
HINWEIS: Safari 5.1 berichtete fälschlicherweise, dass sie required Eigenschaft unterstützt, sodass das Formular ohne Validierung der erforderlichen Felder eingereicht wird. Dies ist ein Fehler von Safari, aber in Modernizr existiert es nicht.
Wenn Sie bereit sind, Ihre Website bereitzustellen, wird empfohlen, eine benutzerdefinierte Produktversion von Modernizr zu erstellen, die nur die Elemente enthält, die Sie tatsächlich benötigen. Dies kann die Größe der Modernizr -Bibliothek von 44 KB auf 2 KB entsprechend der von Ihnen ausgewählten Funktionen verringern. Der Bereich der aktuellen Optionen ist in Abbildung 8 dargestellt.
Abbildung 8. Modernizr -Download -Seite ermöglicht es Ihnen, nur die von Ihnen benötigten Funktionen auszuwählenDie Optionen können in den folgenden Kategorien leicht gruppiert werden: CSS3, HTML5, MISC (Ellaneous) und Extra. Klicken Sie auf die Schaltfläche "Schalten" neben den ersten drei Titeln, um alle Kontrollkästchen in der Auswahlkategorie auszuwählen oder zu verwerfen.
Standardmäßig wählt die zusätzliche Kategorie die folgenden drei Einträge aus:
Wenn Sie in der Kategorie CSS3 eine Option auswählen, werden auch die Optionen in der folgenden zusätzlichen Kategorie ausgewählt:
Modernizr.testProp() Modernizr.testAllProps() Modernizr._domPrefixes()Deaktivieren Sie diese Optionen nicht . Auf diese Weise werden alle Optionen, die Sie in der Kategorie CSS3 ausgewählt haben, automatisch abgesagt.
MQ Polyfill (reagieren.js) in der zusätzlichen Kategorie hat ein Skript hinzugefügt, mit dem Medienabfragen im IE 6-8 nur begrenzte Unterstützung erhalten. Wenn Sie diese Option auswählen, wählt sie automatisch Medienabfragen und modernizr.TestStyles () aus. Weitere Informationen zu Medienabfragen Polyfill (reagieren.js) finden Sie unter https://github.com/scottjehl/respect.
Nur fortgeschrittene Benutzer interessieren sich für andere Optionen in der zusätzlichen Kategorie. Weitere Informationen darüber, was sie sind und wie sie verwendet werden, finden Sie im Abschnitt Erweiterbarkeit der Modernizr -Dokumentation.
In der folgenden Beschreibung wird beschrieben, wie Sie eine benutzerdefinierte Produktversion von Modernizr für die Beispieldatei erstellen. Diese benutzerdefinierte Version ist für nachfolgende Übungen erforderlich, in der angezeigt wird, wie externe JavaScript -Dateien mithilfe von Modernizr.load() geladen werden.
Beim Erstellen einer benutzerdefinierten Produktionsversion von Modernizr muss die Option mit Modernizr.load() standardmäßig ausgewählt werden. Modernizr.load() ist ein Alias für yepnope() , ein eigenständiger Skriptlader, der synchron mit Modernizr entwickelt wurde. Um zu veranschaulichen, wie man es verwendet, gebe ich ein einfaches Beispiel. Ich habe das entsprechende Skript von erforderlich.html auf check_required.js verschoben und drei geringfügige Änderungen vorgenommen, um die Entfernung von Modernizr -Tests zu erleichtern und einer Variablen namens init zuzuweisen. Das überarbeitete Skript sieht so aus:
var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted 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; } }; }; Ein großer Vorteil von Modernizr.load() besteht darin, dass es Skripte laden kann, die auf den Ergebnissen der Testbrowserfunktionen basieren - deshalb wurde es zuerst yepnope() genannt. Es kann externe Skripte asynchron geladen werden - mit anderen Worten können externe Skripte geladen werden, nachdem der Browser das DOM -Modell (Dokumentobjektmodell) geladen hat. Es kann also dazu beitragen, Ihre Website -Leistung zu verbessern.
Die grundlegende Syntax von Modernizr.load() besteht darin, ein Objekt mit den folgenden Attributen zu übergeben:
test : Die Modernizr -Eigenschaft, die Sie erkennen möchten. yep : Wenn der Test erfolgreich ist, ist der Ort des Skripts, das Sie laden möchten. Verwenden Sie ein Multi-Script-Array. nope : Wenn der Test fehlschlägt, ist der Speicherort des Skripts, das Sie laden möchten. Verwenden Sie ein Multi-Script-Array. complete : Eine Funktion, die ausgeführt wird, sobald ein externes Skript geladen wird (optional). Sowohl yep als nope sind optional, solange Sie einen von ihnen zur Verfügung stellen.
Um Skripte in check_required.js zu laden und auszuführen, müssen Sie den folgenden <script> -Block hinzufügen, nachdem Modernizr.adc.js an die Seite angehängt wurde (der Code befindet sich in fordernd_load.html):
<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script> Dies ist genau das gleiche wie zuvor, kann jedoch die Download -Last von Browsern reduzieren, die required Attribut bereits unterstützen.
Um mehrere Bedingungen zu testen, können Sie eine Reihe von Objekten an Modernizr.load() übergeben. Weitere Informationen finden Sie im Tutorial Modernizr.load () zur Modernizr -Dokumentation.
Modernizr ist ein leistungsstarkes und nützliches Werkzeug, aber das bedeutet nicht, dass Sie es verwenden sollten. Nicht alle Fälle müssen Modernizr verwenden, um dem Browser mehrere Stile bereitzustellen. Wenn Ihr Hauptaugenmerk auf dem Internet -Explorer liegt, sollten Sie IE bedingte Kommentare verwenden. Sie können auch CSS Stack verwenden, um einige Stile zu überschreiben. Verwenden Sie beispielsweise zuerst Hexadezimalfarbe und überschreiben Sie sie dann mit rgba() oder hsla() . Ältere Versionen von Browsern verwenden den ersten Wert und ignorieren den zweiten Wert.
Modernizr wird wirklich Realität, wenn es mit Polyfills und anderen JavaScript kombiniert wird. Denken Sie jedoch daran, dass es normalerweise einfach ist, Ihre eigenen Tests zu erstellen, die für die Unterstützung von Funktionen geeignet sind. Im Folgenden finden Sie den folgenden Code, den Sie testen, ob ein Browser required Attribut unterstützt (der Code befindet sich in fordern_nomoderizr.html):
var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }Dieses Tutorial hat alle Hauptmerkmale von Modernizr behandelt. Weitere Informationen zu diesen Funktionen finden Sie in der entsprechenden offiziellen Dokumentation, die sich unter http://www.modernizr.com/docs/ befindet. Darüber hinaus finden Sie die folgenden nützlichen Ressourcen:
yepnope() , die in Modernizr in Modernizr.load() zusammengeführt wurde. +