Browserfeatures mit Modernizr testen - Versionsgeschichte

134.3.86.14 am 6. Juli 2023 um 12:01 Uhr

2023-07-06T12:01:52Z

37.49.32.84: /* Mit Klassen Testen */

2017-05-24T12:14:11Z

Mit Klassen Testen

37.49.32.84: Die Seite wurde neu angelegt: „https://maurice-web.de/modernizr-einsetzen-so-gehts-mit-version-3/ Modernizr testet ob der Browser bestimmte Fähigkeiten hat, und setzt entsprechend Klassen…“

2017-05-24T12:10:21Z

Die Seite wurde neu angelegt: „https://maurice-web.de/modernizr-einsetzen-so-gehts-mit-version-3/ Modernizr testet ob der Browser bestimmte Fähigkeiten hat, und setzt entsprechend Klassen…“

Neue Seite

https://maurice-web.de/modernizr-einsetzen-so-gehts-mit-version-3/

Modernizr testet ob der Browser bestimmte Fähigkeiten hat, und setzt entsprechend Klassen in das HTML Tag. Dies kann man dann nutzen um Styles anzupassen oder ein JavaScript Fallback zu implementieren.
== Quickstart ==
Auf Modernizr.js unter build gewünschte Features auswählen und Datei runterladen. Dann einbinden. Klassen werden automatisch im html tag gesetzt

== Mit Klassen Testen ==

== Mit JavaScript Testen ==
<pre>
if (Modernizr.awesomeNewFeature) {
showOffAwesomeNewFeature();
} else {
getTheOldLameExperience();
}
</pre>

← Nächstältere Version		Version vom 6. Juli 2023, 12:01 Uhr
Zeile 1:		Zeile 1:
−	https://maurice-web.de/modernizr-einsetzen-so-gehts-mit-version-3/	+
		+	[[Browser - Compatibility Detection]]
		+	[[Browser - Hacks]]
		+	https://caniuse.com/
		+	https://maurice-web.de/modernizr-einsetzen-so-gehts-mit-version-3/

	Modernizr testet ob der Browser bestimmte Fähigkeiten hat, und setzt entsprechend Klassen in das HTML Tag. Dies kann man dann nutzen um Styles anzupassen oder ein JavaScript Fallback zu implementieren.		Modernizr testet ob der Browser bestimmte Fähigkeiten hat, und setzt entsprechend Klassen in das HTML Tag. Dies kann man dann nutzen um Styles anzupassen oder ein JavaScript Fallback zu implementieren.

← Nächstältere Version		Version vom 24. Mai 2017, 12:14 Uhr
Zeile 6:		Zeile 6:

	== Mit Klassen Testen ==		== Mit Klassen Testen ==
		+	https://www.quora.com/Whats-the-best-way-to-create-a-jQuery-fallback-for-my-CSS3-transistions
		+	<syntaxhighlight lang="css">
		+	#myElement {
		+	opacity:0.9;
		+
		+	-webkit-transition:opacity .25s;
		+	-moz-transition:opacity .25s;
		+	transition:opacity .25s;
		+	}
		+
		+	.csstransitions #myElemement:hover,
		+	.no-js #myElement:hover {
		+	opacity:1;
		+	}
		+	</syntaxhighlight>

		+	JavaScript:
		+	<syntaxhighlight lang="javascript">
		+	$(document).ready(function(){
		+
		+	//fallback for CSS
		+	$(".no-csstransitions #myElement").hover(function(){
		+	//hover enter
		+	$(this).animate({
		+	opacity:1
		+	},250);
		+
		+	}, function() {
		+	// hover leave
		+	$(this).animate({
		+	opacity:.9
		+	},250);
		+	});
		+
		+	});
		+	</syntaxhighlight>

	== Mit JavaScript Testen ==		== Mit JavaScript Testen ==