Modernizr ist eine JavaScript-Bibliothek, welche es ermöglicht, HTML5- und CSS3-Features in verschiedenen Browsern zu erkennen. Dies ermöglicht es JavaScript, nicht vorhandene Features zu umgehen oder , wie etwa einen aufzurufen, um diese nachzubilden. Modernizr hat zum Ziel, das Erkennen von Browserfeatures komplett zu standardisieren.modernizr.com.
Überblick Viele neue HTML5- und CSS 3-Features stehen bereits in mindestens einem der großen Browser zur Verfügung. Modernizr erkennt, ob der aktuelle Browser ein bestimmtes Feature implementiert hat. Dies ermöglicht es Entwicklern, die Vorteile neuer Features in unterstützenden Browsern zu erzielen und für Browser zu entwickeln, die diese neuen Features nicht bieten.
Funktionalität Modernizr setzt auf das Erkennen von Features (englisch ), anstatt mithilfe der Browsereigenschaften zu überprüfen, ob der Browser etwas kann oder nicht. Die Entwickler nehmen an, dass verlässlicher ist, da derselbe HTML-Renderer nicht unbedingt die gleichen Funktionalitäten in verschiedenen Browsern und Browserversionen zur Verfügung stellt. Darüber hinaus kann der User Agent durch den Benutzer geändert worden sein, vor allem um Webseiten, die bestimmte Browserfunktionalitäten erwarten, diese vorzutäuschen.
Modernizr stellt mehr als 250 Tests für „“ zur Verfügung, dann erstellt es ein JavaScript-Objekt (namens „Modernizr“), das die Testergebnisse als Booleschen Wert beinhaltet. Es erweitert auch das HTML-Element um Klassen, die die Testergebnisse widerspiegeln.
Um bestimmte CSS-Features zu erkennen, erstellt Modernizr oft Elemente, weist diesen bestimmte CSS- zu und versucht diese zu überprüfen, da Browser, die das jeweilige CSS- implementieren, etwas sinnvolles zurückgeben, während sonst nichts oder Werte wie „“ zurückgeben werden.
Viele Tests in der Dokumentation beinhalten ein Praxisbeispiel, um zu demonstrieren, wie ein bestimmter Test eingesetzt werden kann.
Einsatz Modernizr startet selbstständig. Es gibt keine Initialisierungsfunktion, die aufgerufen werden muss. Nachdem Modernizr fertig ist, erstellt es ein globales „Modernizr“-Objekt, das Boolesche Werte enthält. Wenn ein Browser zum Beispiel die Canvas API unterstützt, wird Modernizr.canvas „“ ausgeben, sonst „“. if (Modernizr.canvas) { // Der Browser unterstützt Canvas } else { // Der Browser unterstützt Canvas nicht
Begrenzungen Modernizr fügt dem Browser keine fehlenden Funktionalitäten hinzu oder simuliert diese. Dies ist Aufgabe sogenannter Shims wie dem HTML5 Shiv, diese JavaScript-Bibliothek fügt Unterstützung für HTML5-Elemente in den Internet-Explorer-Versionen vor 9 hinzu,HTML 5 elements in IE. solche werden auch in der Modernizr-Dokumentation aufgelistet.HTML5 Cross Browser Polyfills
Beispiele JavaScript-Beispiel <!DOCTYPE html> <html class="no-js" lang="en"> <head> <title>Modernizr – JavaScript Beispiel</title>
<script src="path/to/modernizr.js"></script> </head> <body> <p id="result"></p>
<script> elem = document.getElementById('result'); if (! Modernizr.websockets ) { elem.innerHTML = 'Dieser Browser unterstützt keine WebSockets.'; } else { elem.innerHTML = 'Dieser Browser unterstützt WebSockets.';
</script> </body> </html>
CSS-Beispiel <!DOCTYPE html> <html class="no-js" lang="en"> <head> <title>Modernizr – CSS Beispiel</title>
<style> .wsno, .wsyes { display: none; } /* Modernizr wird dem HTML-Objekt eine der folgenden Klassen zuweisen, je nachdem ob der Browser WebSockets unterstützt oder nicht. */ .no-websockets .wsno, .websockets .wsyes { display: block; } </style>
<script src="path/to/modernizr.js"></script> </head> <body>
<p class="wsno">Dieser Browser unterstützt keine WebSockets.</p>
<p class="wsyes">Dieser Browser unterstützt WebSockets.</p> </body> </html>
Preise und Ehrungen Sowohl 2010 als auch 2011 gewann Modernizr den „“ und 2011 gewann einer der Hauptentwickler, Paul Irish, den „“-Preis. Die Webseite gewann in den Kategorien Progressive Verbesserung und den ersten respektive zweiten Platz in der „“ des net magazines. In: netmagazine.com
Siehe auch WebSocket WebGL
Weblinks Offizielle Website
Einzelnachweise
Kategorie:HTML Kategorie:JavaScript-Bibliothek