Browserfeatures mit Modernizr testen

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.

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

https://www.quora.com/Whats-the-best-way-to-create-a-jQuery-fallback-for-my-CSS3-transistions

#myElement {
	opacity:0.9;
 
	-webkit-transition:opacity .25s;
	-moz-transition:opacity .25s;
	transition:opacity .25s;
}
 
	.csstransitions #myElemement:hover,
	.no-js #myElement:hover {
		opacity:1;
	}

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);	
	});
 
});

Mit JavaScript Testen

 if (Modernizr.awesomeNewFeature) {
    showOffAwesomeNewFeature();
  } else {
    getTheOldLameExperience();
  }