JavaScript - Feature Detection: Unterschied zwischen den Versionen
(Die Seite wurde neu angelegt: „ https://kulturbanause.de/blog/feature-detection-ohne-modernizr/#comments https://gist.github.com/tomblanchard/11290882#file-mini-modernizr-html Moderne Webs…“) |
|||
| Zeile 5: | Zeile 5: | ||
== Snippets == | == Snippets == | ||
| − | === Mini Modernizer === | + | === Mini Modernizer (JS, Touch) === |
JavaScript überprüfen, Touchscreen überprüfen. | JavaScript überprüfen, Touchscreen überprüfen. | ||
| Zeile 17: | Zeile 17: | ||
!function(a,b){"use strict";b.documentElement.className=b.documentElement.className.replace("no-js","js"),("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)&&(document.documentElement.className=document.documentElement.className.replace("no-touch","touch"))}(window,document); | !function(a,b){"use strict";b.documentElement.className=b.documentElement.className.replace("no-js","js"),("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)&&(document.documentElement.className=document.documentElement.className.replace("no-touch","touch"))}(window,document); | ||
</script> | </script> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | === SVG === | ||
| + | Quelle: Kulturbanause s.o. | ||
| + | |||
| + | Die Dateiendung *.svg in <img>-Tags durch *.png ersetzen, sofern der Browser keine SVGs darstellen kann. | ||
| + | |||
| + | <syntaxhighlight lang="javascript"> | ||
| + | // Prüfe ob SVGs dargestellt werden können | ||
| + | if(!document.createElement('svg').getAttributeNS){ | ||
| + | $('html').addClass('no-svg'); | ||
| + | |||
| + | // Schreibe im HTML-Markup die Dateiendung *.svg auf *.png um. | ||
| + | $('img[src$="svg"]').attr('src', function() { | ||
| + | return $(this).attr('src').replace('.svg', '.png'); | ||
| + | }); | ||
| + | } else { | ||
| + | $('html').addClass('svg'); | ||
| + | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Version vom 24. April 2022, 09:45 Uhr
https://kulturbanause.de/blog/feature-detection-ohne-modernizr/#comments https://gist.github.com/tomblanchard/11290882#file-mini-modernizr-html
Moderne Websites setzen fast ausnahmslos das Konzept »Feature Detection« ein, um in Erfahrung zu bringen, welche Techniken oder Funktionen von einem Browser unterstützt werden. Dazu wird i.d.R. die Feature Detection-Library Modernizr eingesetzt. Bei vielen Projekten halte ich Modernizr jedoch für überdimensioniert, da man häufig nur prüfen möchte ob JavaScript aktiviert ist, ob der Anwender einen Touch-Screen benutzt und ob SVGs eingesetzt werden können. In diesem Beitrag möchte ich daher einige JavaScript-Snippets archivieren, mit denen ihr die notwendigen Infos in Erfahrung bringen könnt ohne dafür die ganze Modernizr-Bibliothek laden zu müssen. In Zukunft werden in diesem Zusammenhang die Feature Queries von CSS sicher auch sehr interessant. (Quelle: Kulturbanause s.o.)
Snippets
Mini Modernizer (JS, Touch)
JavaScript überprüfen, Touchscreen überprüfen.
Ersetzt folgende Klassen auf dem <html> Element:
no-js => js no-touch => touch
<script>
!function(a,b){"use strict";b.documentElement.className=b.documentElement.className.replace("no-js","js"),("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)&&(document.documentElement.className=document.documentElement.className.replace("no-touch","touch"))}(window,document);
</script>
SVG
Quelle: Kulturbanause s.o.
Die Dateiendung *.svg in <img>-Tags durch *.png ersetzen, sofern der Browser keine SVGs darstellen kann.
// Prüfe ob SVGs dargestellt werden können
if(!document.createElement('svg').getAttributeNS){
$('html').addClass('no-svg');
// Schreibe im HTML-Markup die Dateiendung *.svg auf *.png um.
$('img[src$="svg"]').attr('src', function() {
return $(this).attr('src').replace('.svg', '.png');
});
} else {
$('html').addClass('svg');
}
