Modernizr
Modernizr ist eine JavaScript-Bibliothek, welche es ermöglicht, HTML5- und CSS3-Features in verschiedenen Browsern zu erkennen.[6] Dies ermöglicht es JavaScript, nicht vorhandene Features zu umgehen oder Workarounds, wie etwa einen Shim aufzurufen, um diese nachzubilden. Modernizr hat zum Ziel, das Erkennen von Browserfeatures komplett zu standardisieren.[10]
| 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.13.0[4] (15. August 2023[4]) |
| Aktuelle Vorabversion | 3.0.0-pre[5] (27. Oktober 2014) |
| Betriebssystem | Plattformunabhängig |
| Programmiersprache | JavaScript[6] |
| Kategorie | Featureerkennung (englisch Feature detection)[6] |
| Lizenz | MIT-Lizenz[7]; vom 14. Juni 2010[8] bis zum 15. September 2012[9] dual lizenziert MIT-BSD |
| deutschsprachig | nein |
| modernizr.com | |
Überblick
BearbeitenViele 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.[11][12][13][14] Dies ermöglicht es Entwicklern, die Vorteile neuer Features in unterstützenden Browsern zu erzielen und Fallbacks für Browser zu entwickeln, die diese neuen Features nicht bieten.
Funktionalität
BearbeitenModernizr setzt auf das Erkennen von Features (englisch feature detection), anstatt mithilfe der Browsereigenschaften zu überprüfen, ob der Browser etwas kann oder nicht. Die Entwickler nehmen an, dass feature detection 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 „next generation features“ 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-Styles zu und versucht diese zu überprüfen, da Browser, die das jeweilige CSS-Feature implementieren, etwas sinnvolles zurückgeben, während sonst nichts oder Werte wie „undefined“ zurückgeben werden.
Viele Tests in der Dokumentation beinhalten ein Praxisbeispiel, um zu demonstrieren, wie ein bestimmter Test eingesetzt werden kann.
Einsatz
BearbeitenModernizr 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 „true“ ausgeben, sonst „false“.
if (Modernizr.canvas) {
// Der Browser unterstützt Canvas
} else {
// Der Browser unterstützt Canvas nicht
}
Begrenzungen
BearbeitenModernizr 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,[15] solche Polyfills werden auch in der Modernizr-Dokumentation aufgelistet.[16]
Beispiele
BearbeitenJavaScript-Beispiel
Bearbeiten<!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
Bearbeiten<!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
BearbeitenSowohl 2010 als auch 2011 gewann Modernizr den „.net Award for Open Source App of the Year“ und 2011 gewann einer der Hauptentwickler, Paul Irish, den „Developer of the Year“-Preis.[17] Die Webseite gewann in den Kategorien Progressive Verbesserung und Responsive Webdesign den ersten respektive zweiten Platz in der „List of Top Web Design Trends for 2012“ des net magazines.[18]
Siehe auch
BearbeitenWeblinks
Bearbeiten- 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 am 19. Dezember 2013.
- Mordernizr and Web Development.
Einzelnachweise
Bearbeiten- ↑ 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).
- ↑ registry.npmjs.com. In: npmjs. (abgerufen am 1. März 2023).
- ↑ 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: codeproject.com. 10. Januar 2011, abgerufen am 25. Dezember 2015.
- ↑ Daniel Sellergren: Using Modernizr to Determine HTML5 CSS3 Support. Februar 2011, archiviert vom 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. ( vom 11. März 2014 im Internet Archive)
- ↑ 15 top web design and development trends for 2012. ( vom 11. September 2013 im Internet Archive) In: .net