Uhr: Verwenden Sie Modernizr CSS -Klassen

Dieses Video zeigt, wie Modernizr das CSS -Styling basierend auf der Browser -Funktionsunterstützung vereinfacht. Modernizr fügt nachgewiesene Funktionsergebnisse als Klassen zum HTML -Element hinzu. In diesem Tutorial wird die Emoji-Unterstützung als Beispiel verwendet, um eine einfache Kugelliste in eine Emoji-verstärkte zu verwandeln. Diese Lektion bietet ein grundlegendes Verständnis für die Verwendung von CSS -Klassen von Modernizr für das bedingte Styling. Der dazugehörige Code ist auf GitHub verfügbar. Dies ist ein Segment vom Modernizr 3 -Kurs von SitePoint Premium. Weitere Informationen finden Sie im gesamten Kurs.

Häufig gestellte Fragen zu Modernizr und seinen CSS -Klassen

Was ist Modernizr und seine Bedeutung für die Webentwicklung?

modernizr ist eine JavaScript -Bibliothek, die HTML5- und CSS3 -Browserunterstützung feststellt. Seine Bedeutung liegt darin, dass Entwickler fortschrittliche HTML5- und CSS3 -Funktionen nutzen und gleichzeitig Fallbacks für ältere Browser bereitstellen. Dies gewährleistet eine konsistente Website -Funktionalität auf allen Browsern und Geräten, wobei die Benutzererfahrung optimiert wird.

Wie funktioniert Modernizr?

Auf der Seitenlast, Modernizr -Tests Browser -Funktionen. Anschließend werden Klassen zum HTML -Element hinzugefügt, das die Funktionsunterstützung angibt. Dies ermöglicht es für bedingte CSS und JavaScript, unterschiedliche Browserfunktionen zu verarbeiten, wobei die konsistente Benutzererfahrung aufrechterhalten wird.

installieren und verwenden modernizr:

installieren Sie Modernizr per Download von seiner offiziellen Website oder verwenden Sie NPM oder Bower. Fügen Sie es mit einem <script></script> -Tag in Ihr HTML ein. Verwenden Sie die API von Modernizr, um Funktionen zu testen und Stile oder Skripte entsprechend anzuwenden.

Anpassung Modernizr:

Ja, Modernizr ist sehr anpassbar. Auf der Seite "Modernizr Download" ermöglicht die Auswahl der erforderlichen Tests und erstellt ein kleineres, schnelleres benutzerdefiniertes Build.

Beispiele für Modernizr in CSS:

Modernizr ermöglicht CSS -Regeln, die auf bestimmte Browserfunktionen abzielen. Erkennen Sie beispielsweise CSS -Gradientenunterstützung und bieten eine Fallback -Farbe:

.no-cssgradients .element {
  background: #F00;
}

.cssgradients .element {
  background: linear-gradient(to bottom, #F00, #000);
}

modernizr und javaScript:

modernizr arbeitet auch mit javaScript für bedingte Skriptlade- oder Codeausführung basierend auf den Browserfunktionen. Dies ist nützlich für Polyfills für nicht unterstützte Funktionen oder Leistungsoptimierung.

modernizr und progressive Verbesserung:

modernizr unterstützt die progressive Verbesserung, indem sie leicht Fallbacks für nicht unterstützte Funktionen bereitstellt. Dies stellt sicher, dass der Kerninhalt und die Funktionalität für alle Benutzer unabhängig von den Browserfunktionen zugänglich bleiben.

Gemeinsame Modernizr -Fallstricke:

Übereinheitlich zu Modernizr zur Erkennung von Merkmalen ist ein häufiger Fehler. Obwohl es leistungsfähig ist, ist es kein Ersatz für gute Codierungspraktiken. Denken Sie daran, dass nicht alle Merkmale von Modernizr nachweisbar sind. Fügen Sie immer geeignete Fallbacks ein.

beitragen zu Modernizr:

modernizr ist open-source; Beiträge sind willkommen. Tragen Sie bei, indem Sie Fehler melden, Funktionen vorschlagen, die Dokumentation verbessern oder Pull -Anfragen über die Modernizr Github -Seite senden.

Weitere moderne Ressourcen:

Die offizielle Modernizr -Website bietet umfassende Dokumentation und Beispiele. Weitere Ressourcen sind Online -Tutorials, Blog -Beiträge und Webentwicklungsforen.

Das obige ist der detaillierte Inhalt vonUhr: Verwenden Sie Modernizr CSS -Klassen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!