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.
ModernizrAnstatt 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 ModernizrVersion 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
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
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>
$(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
}
});
$(document).ready(function () { if (Modernizr.borderradius) {
$('#MyDiv').addClass('borderRadiusStyle');
} if (Modernizr.csstransforms) {
$('#MyDiv').addClass('transformsStyle');
}
});
if (Modernizr.video.h264 == "") {
// h264 is not supported
}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.
Referenz:
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
