Мы используем файлы cookie.
Продолжая использовать сайт, вы даете свое согласие на работу с этими файлами.
Responsive Webdesign
Modernizr
Другие языки:

Modernizr

Подписчиков: 0, рейтинг: 0
Modernizr

Logo von 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
Erscheinungsjahr 2009
Aktuelle Version 3.12.0
(15. Februar 2022)
Betriebssystem Plattformunabhängig
Programmiersprache JavaScript
Kategorie Featureerkennung (englisch Feature detection)
Lizenz MIT-Lizenz; vom 14. Juni 2010 bis zum 15. September 2012dual 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. 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.

Ü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 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, solche Polyfills werden auch in der Modernizr-Dokumentation aufgelistet.

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. 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.

Siehe auch

Weblinks


Новое сообщение