HTML - Modernisierer

Leon A. - July 19, 2024

Erste Schritte

Um Modernizr in Ihrem Projekt zu verwenden, müssen Sie die Modernizr-Bibliothek in Ihre HTML-Datei einbinden. Dafür gibt es zwei Hauptmöglichkeiten: Modernizr herunterladen und in Ihr Projekt einbinden oder ein Content Delivery Network (CDN) nutzen.

Das Herunterladen von Modernizr ist einfach. Besuchen Sie die offizielle Modernizr-Website (https://modernizr.com/) und klicken Sie auf den "Download"-Button. Sie können zwischen der Entwicklungsversion, die Kommentare enthält und nicht minimiert ist, oder der Produktionsversion wählen, die für bessere Leistung minimiert ist. Nach dem Herunterladen platzieren Sie die Modernizr-JavaScript-Datei in Ihrem Projektverzeichnis und binden Sie sie mit dem <script>-Tag in Ihre HTML-Datei ein, vorzugsweise im <head>-Bereich:

Beispiel: Modernizr mit heruntergeladener Datei einbinden

<head>
  <script src="path/to/modernizr.js"></script>
</head>

Die Verwendung eines CDN ist eine weitere Möglichkeit, Modernizr in Ihr Projekt einzubinden. Sie können das cdnjs CDN nutzen, indem Sie diesen <script>-Tag zu Ihrer HTML-Datei hinzufügen:

Beispiel: Modernizr mit CDN einbinden

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>

Ersetzen Sie 2.8.3 durch die Version von Modernizr, die Sie verwenden möchten. Die Nutzung eines CDN führt zu schnelleren Ladezeiten, da der Browser des Benutzers es möglicherweise von anderen Websites gecacht hat.

Sobald Sie Modernizr in Ihr Projekt eingebunden haben, können Sie seine Funktionen zur Erkennung von HTML5- und CSS3-Funktionen nutzen und bei Bedarf Polyfills und Fallbacks laden.

Featureerkennung

Featureerkennung ist eine Technik, um zu prüfen, ob ein Browser eine bestimmte Funktion oder Funktionalität unterstützt. Sie ermöglicht es, bedingten Code zu schreiben, der verschiedene Pfade ausführt, je nachdem ob ein Feature vorhanden ist oder nicht. Modernizr ist eine Bibliothek, die die Featureerkennung für HTML5- und CSS3-Funktionen vereinfacht.

Mit Modernizr können Sie die Unterstützung verschiedener HTML5- und CSS3-Funktionen erkennen. Es fügt dem <html>-Element Klassen hinzu, die anzeigen, welche Funktionen vom Browser unterstützt werden.

Beispiel: Verwendung von Modernizr mit HTML5 und CSS3

<p>Wenn der Browser das HTML5 <canvas>-Element unterstützt, fügt Modernizr die Klasse canvas zum <html>-Element hinzu. Wenn nicht, wird stattdessen die Klasse no-canvas hinzugefügt.</p>

Sie können diese Klassen in Ihrem CSS verwenden, um verschiedene Stile oder Verhaltensweisen basierend auf der Feature-Unterstützung anzuwenden:

Beispiel: Anwendung verschiedener Stile basierend auf der Feature-Unterstützung

.canvas {
  /* Stile für Browser, die canvas unterstützen */
}

.no-canvas {
  /* Fallback-Stile für Browser, die canvas nicht unterstützen */
}

In Ihrem JavaScript-Code können Sie Modernizr verwenden, um die Feature-Unterstützung programmatisch zu überprüfen:

Beispiel: Überprüfung der Feature-Unterstützung in JavaScript

if (Modernizr.canvas) {
  // Code für Browser, die canvas unterstützen
} else {
  // Fallback-Code für Browser, die canvas nicht unterstützen
}

Modernizr bietet auch eine Methode namens Modernizr.testAllProps(), mit der Sie mehrere CSS-Eigenschaften gleichzeitig testen können. Sie nimmt einen Eigenschaftsnamen als erstes Argument und einen optionalen Wert als zweites Argument. Sie gibt true zurück, wenn der Browser die Eigenschaft mit dem angegebenen Wert unterstützt:

Beispiel: Verwendung der Modernizr.testAllProps-Methode

if (Modernizr.testAllProps('background', 'linear-gradient(to bottom, #000, #fff)')) {
  // Code für Browser, die lineare Farbverläufe unterstützen
} else {
  // Fallback-Code für Browser, die lineare Farbverläufe nicht unterstützen
}

Durch die Nutzung der Featureerkennungsfähigkeiten von Modernizr können Sie intelligenten und anpassungsfähigen Code schreiben, der unterschiedliche Stufen der Browser-Unterstützung geschickt handhabt. Dies ermöglicht es Ihnen, moderne HTML5- und CSS3-Funktionen zu verwenden und gleichzeitig Fallbacks für ältere Browser bereitzustellen.

Bedingte Ladung

Bedingte Ladung ist eine Technik, bei der bestimmte Ressourcen wie Polyfills oder Fallbacks basierend darauf geladen werden, ob ein Browser eine bestimmte Funktion unterstützt. Mit Modernizr können Sie die bedingte Ladung nutzen, um Ressourcen nur bei Bedarf zu laden. Dies verbessert die Leistung und reduziert unnötige Downloads.

Polyfills sind Skripte, die das Verhalten moderner Funktionen in älteren Browsern nachahmen, die diese nicht nativ unterstützen. Fallbacks sind alternative Lösungen oder Stile, die verwendet werden, wenn ein Browser eine bestimmte Funktion nicht unterstützt. Modernizr ermöglicht es Ihnen, Polyfills und Fallbacks basierend auf den Ergebnissen der Funktionserkennung bedingt zu laden.

Um die bedingte Ladung mit Modernizr zu verwenden, können Sie die Methode Modernizr.load() nutzen. Diese Methode akzeptiert ein Objekt oder ein Array von Objekten als Argument. Jedes Objekt repräsentiert eine zu ladende Ressource und die Bedingungen, unter denen sie geladen werden soll.

Beispiel: Bedingte Ladung mit Modernizr.load()

Modernizr.load({
  test: Modernizr.classlist,
  nope: 'classList.js', // Polyfill für classList
});

Die Eigenschaft test gibt die zu testende Funktion an, in diesem Fall Modernizr.classlist. Wenn der Browser die classList-API nicht unterstützt, wird die Polyfill-Datei classList.js über die Eigenschaft nope geladen.

Sie können Modernizr.load() auch verwenden, um verschiedene Ressourcen basierend auf mehreren Funktionstests zu laden:

Beispiel: Bedingte Ladung basierend auf mehreren Funktionstests

Modernizr.load([
  {
    test: Modernizr.geolocation,
    yep: 'geolocation.js', // Skript zur Verwendung der Geolokalisierung
    nope: 'geolocation-fallback.js' // Fallback-Skript
  },
  {
    test: Modernizr.localstorage,
    yep: 'localstorage-feature.js', // Skript zur Verwendung des lokalen Speichers
    nope: 'localstorage-fallback.js' // Fallback-Skript
  }
]);

Mehrere Funktionstests werden in einem Array angegeben. Wenn der Browser Geolokalisierung unterstützt, wird das Skript geolocation.js geladen. Wenn nicht, wird stattdessen das Skript geolocation-fallback.js geladen. Ähnlich verhält es sich mit dem lokalen Speicher: Wenn der Browser diesen unterstützt, wird das Skript localstorage-feature.js geladen; andernfalls wird das Skript localstorage-fallback.js geladen.

Die bedingte Ladung mit Modernizr hilft Ihnen, Ressourcen selektiv basierend auf den Fähigkeiten Ihres Browsers zu laden. Dies ermöglicht es Ihnen, eine maßgeschneiderte Erfahrung zu bieten und gleichzeitig die Leistung zu optimieren, indem nur notwendige Ressourcen geladen werden.

Modernizr anpassen

Modernizr ermöglicht es Ihnen, individuelle Builds für die Anforderungen Ihres Projekts zu erstellen. Standardmäßig enthält Modernizr viele Feature-Tests, die Sie möglicherweise nicht alle benötigen. Durch die Erstellung eines individuellen Builds können Sie nur die benötigten Tests auswählen, was die Dateigröße reduziert und die Leistung verbessert.

Um einen individuellen Modernizr-Build zu erstellen, besuchen Sie die offizielle Modernizr-Website (https://modernizr.com/download/) und verwenden Sie den Online-Builder. Der Builder bietet eine Oberfläche, auf der Sie spezifische Feature-Tests für Ihren individuellen Build auswählen können.

Im Online-Builder finden Sie eine Liste verfügbarer Feature-Tests, die in Kategorien wie "HTML5", "CSS" und "JavaScript" gruppiert sind. Sie können diese Kategorien durchsuchen und die relevanten Tests für Ihr Projekt auswählen. Wenn Ihr Projekt beispielsweise HTML5-Video und -Audio verwendet, können Sie diese spezifischen Tests auswählen.

Sie können auch mehrere Feature-Tests kombinieren, um komplexere Bedingungen zu erstellen. Modernizr ermöglicht es Ihnen, logische Operatoren wie UND (&&) und ODER (||) zu verwenden, um Tests zu kombinieren. Dies ist nützlich, wenn Sie eine Kombination von Funktionen überprüfen möchten, bevor Sie eine Ressource laden oder einen Stil anwenden.

Beispiel: Kombinieren von Feature-Tests

if (Modernizr.touch && Modernizr.geolocation) {
  // Code für Geräte, die sowohl Touch als auch Geolokalisierung unterstützen
} else {
  // Fallback-Code für Geräte, die weder Touch noch Geolokalisierung unterstützen
}

Nachdem Sie die gewünschten Feature-Tests ausgewählt und bei Bedarf kombiniert haben, generieren Sie Ihren individuellen Modernizr-Build. Der Online-Builder erstellt eine JavaScript-Datei, die nur die ausgewählten Tests enthält, was zu einer kleineren Dateigröße im Vergleich zur vollständigen Bibliothek führt.

Nach dem Herunterladen Ihres individuellen Builds fügen Sie ihn wie jede andere JavaScript-Datei in Ihr Projekt ein:

Beispiel: Einbinden eines individuellen Modernizr-Builds

<head>
  <script src="pfad/zu/individueller-modernizr.js"></script>
</head>

Durch die Erstellung eines individuellen Modernizr-Builds optimieren Sie die Leistung, indem Sie nur die notwendigen Feature-Tests einbinden. Dies führt zu schnelleren Ladezeiten und reduziert unnötigen Code in Ihrem Projekt.

Denken Sie daran, Ihren individuellen Build aktuell zu halten, wenn sich Ihr Projekt weiterentwickelt. Falls neue Funktionen oder Abhängigkeiten zusätzliche Tests erfordern, aktualisieren Sie Ihren individuellen Build, indem Sie den Online-Builder erneut besuchen.