Modernizr

Modernizr

Logo von Modernizr
Basisdaten

EntwicklerFaruk Ateş mithilfe von Paul Irish, Alex Sexton, Ryan Seddon, Patrick Kettner, Stu Cox, Richard Herrera, und 185 Mitwirkende der GitHub-Community[1][2][3]
Erscheinungsjahr2009[1]
Aktuelle Version3.13.0[4]
(15. August 2023[4])
BetriebssystemPlattformunabhängig
Programmier­spracheJavaScript[5]
KategorieFeatureerkennung (englisch Feature detection)[5]
LizenzMIT-Lizenz[6]; vom 14. Juni 2010[7] bis zum 15. September 2012[8] dual lizenziert MIT-BSD
deutschsprachignein
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 Workarounds, wie etwa einen Shim 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 Fallbacks für Browser zu entwickeln, die diese neuen Features nicht bieten.

Funktionalität

Modernizr 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

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 „true“ ausgeben, sonst „false“.

  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 Polyfills 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 „.net Award for Open Source App of the Year“ und 2011 gewann einer der Hauptentwickler, Paul Irish, den „Developer of the Year“-Preis.[16] 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.[17]

Siehe auch

Einzelnachweise

  1. ↑ a b Faruk Ateş: Modernizr goes 1.0! In: Modernizr. Abgerufen am 14. November 2015 (englisch).
  2. ↑ Contributors. In: GitHub. Abgerufen am 14. November 2015 (englisch).
  3. ↑ Modernizr Homepage. In: Modernizr. Abgerufen am 14. November 2015 (englisch, siehe Seitenfooter für Liste der Hauptentwickler).
  4. ↑ a b Releases. In: GitHub. Abgerufen am 14. August 2019 (englisch).
  5. ↑ 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.“
  6. ↑ Modernizr auf Github. Lizenz. In: GitHub. Abgerufen am 14. November 2015 (englisch).
  7. ↑ Modernizr 1.5: new features, unit tests added. In: Modernizr. 14. Juni 2015, abgerufen am 14. November 2015 (englisch).
  8. ↑ Entfernung der BSD-Lizenz. In: GitHub. Abgerufen am 14. November 2015 (englisch).
  9. ↑ modernizr.com.
  10. ↑ Faruk Ateş: Proudly Announcing: Modernizr. In: Faruk Ateş. 1. Juli 2009, abgerufen am 25. Dezember 2015 (englisch).
  11. ↑ Gil Fink: Detecting HTML5 Features Using Modernizr. In: codeproject.com. 10. Januar 2011, abgerufen am 25. Dezember 2015.
  12. ↑ Daniel Sellergren: Using Modernizr to Determine HTML5 CSS3 Support. Februar 2011, archiviert vom Original am 22. August 2013; abgerufen am 25. Dezember 2015 (englisch).
  13. ↑ David Powers: Using Modernizr to detect HTML5 and CSS3 browser support. In: Adobe. 29. August 2011, abgerufen am 25. Dezember 2015 (englisch).
  14. ↑ HTML 5 elements in IE.
  15. ↑ HTML5 Cross Browser Polyfills
  16. ↑ .net Awards 2011:#7. (Memento vom 11. März 2014 im Internet Archive)
  17. ↑ 15 top web design and development trends for 2012. (Memento vom 11. September 2013 im Internet Archive) In: .net

Auf dieser Seite verwendete Medien

Modernizr 2 Logo.png
Autor/Urheber: Faruk Ateş, Lizenz: MIT
Das Logo der Modernizr Javascript-Bibliothek.