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…“) |
|||
| (Eine dazwischenliegende Version von einem anderen Benutzer wird nicht angezeigt) | |||
| 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. | ||
| Zeile 6: | Zeile 10: | ||
== 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 == | ||
Aktuelle Version vom 6. Juli 2023, 13:01 Uhr
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[Bearbeiten]
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[Bearbeiten]
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[Bearbeiten]
if (Modernizr.awesomeNewFeature) {
showOffAwesomeNewFeature();
} else {
getTheOldLameExperience();
}
