Browserfeatures mit Modernizr testen: Unterschied zwischen den Versionen
Aus Wikizone
(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…“) |
|||
| 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 == | ||
Version vom 24. Mai 2017, 13:14 Uhr
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();
}
