Modernizr
| Modernizr
| |
|---|---|
| |
| Basisdaten
| |
| Entwickler | Faruk Ateş mithilfe von Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera, und 185 Mitwirkende der GitHub-Community[1][2][3] |
| Erscheinungsjahr | 2009[1] |
| Aktuelle Version | 3.12.0[4] (15. Februar 2022[4]) |
| Betriebssystem | Plattformunabhängig |
| Programmiersprache | JavaScript[5] |
| Kategorie | Featureerkennung (englisch Feature detection )[5]
|
| Lizenz | MIT-Lizenz[6]; vom 14. Juni 2010[7] bis zum 15. September 2012[8] dual lizenziert MIT-BSD |
| deutschsprachig | nein |
| modernizr.com | |
Modernizr ist eine JavaScript-Bibliothek, welche es ermöglicht, HTML5- und CSS3-Features in verschiedenen Browsern zu erkennen.[5] 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.[9]
Ü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.[10][11][12][13] 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,[14] solche
werden auch in der Modernizr-Dokumentation aufgelistet.[15]
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.[16] Die Webseite gewann in den Kategorien Progressive Verbesserung und
den ersten respektive zweiten Platz in der „
“ des net magazines.[17]
Siehe auch
Weblinks
- Drupal integration with Modernizr.
- W3C HTML5
- W3C geolocation
- Web workers
- Web worker basics
- Enhancement with Modernizr and Yepnope
- Creating Cross Browser HTML5 Forms Now
- webdesignernote
- HTML Boilerplate in Ajaxian Archives
- Faruk Ateş: Proudly Announcing Modernizr.
- Speeding Up With Modernizr. Archiviert vom Original am 19. Dezember 2013.
- Mordernizr and Web Development.
Einzelnachweise
- ↑ a b Faruk Ateş: Modernizr goes 1.0!. In: Modernizr. Abgerufen am 14. November 2015 (englisch).
- ↑ Contributors. In: GitHub. Abgerufen am 14. November 2015 (englisch).
- ↑ Modernizr Homepage. In: Modernizr. Abgerufen am 14. November 2015 (englisch, siehe Seitenfooter für Liste der Hauptentwickler).
- ↑ a b Releases. In: GitHub. Abgerufen am 14. August 2019 (englisch).
- ↑ a b c Modernizr Dokumentation. What is Modernizr. Abgerufen am 14. November 2015 (englisch): „Modernizr is a small piece of JavaScript code that automatically detects the availability of next-generation web technologies in your user's browsers.“
- ↑ Modernizr auf Github. Lizenz. In: GitHub. Abgerufen am 14. November 2015 (englisch).
- ↑ Modernizr 1.5: new features, unit tests added. In: Modernizr. 14. Juni 2015, abgerufen am 14. November 2015 (englisch).
- ↑ Entfernung der BSD-Lizenz. In: GitHub. Abgerufen am 14. November 2015 (englisch).
- ↑ modernizr.com.
- ↑ Faruk Ateş: Proudly Announcing: Modernizr. In: Faruk Ateş. 1. Juli 2009, abgerufen am 25. Dezember 2015 (englisch).
- ↑ Gil Fink: Detecting HTML5 Features Using Modernizr. In: http://www.codeproject.com/. 10. Januar 2011, abgerufen am 25. Dezember 2015.
- ↑ Daniel Sellergren: Using Modernizr to Determine HTML5 CSS3 Support. Februar 2011, archiviert vom Original am 22. August 2013; abgerufen am 25. Dezember 2015 (englisch).
- ↑ David Powers: Using Modernizr to detect HTML5 and CSS3 browser support. In: Adobe. 29. August 2011, abgerufen am 25. Dezember 2015 (englisch).
- ↑ HTML 5 elements in IE.
- ↑ HTML5 Cross Browser Polyfills
- ↑ .net Awards 2011:#7. (Memento vom 11. März 2014 im Internet Archive)
- ↑ 15 top web design and development trends for 2012. (Memento vom 11. September 2013 im Internet Archive) In: .net
