JavaScript - Feature Detection
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[Bearbeiten]
Mini Modernizer (JS, Touch)[Bearbeiten]
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[Bearbeiten]
Quelle: Kulturbanause s.o.
Testen ob svg unterstützt wird[Bearbeiten]
Prüfen ob SVG unterstützt wird
Um herauszufinden, ob SVG unterstützt wird, reicht folgender Code aus. Auch in diesem Fall fügen wir die Klasse .svg bzw. .no-svg in den <html>-Tag ein.
// Prüfe ob SVGs dargestellt werden können
if(!document.createElement('svg').getAttributeNS){
$('html').addClass('no-svg');
} else {
$('html').addClass('svg');
}
.svg mit .png ersetzen[Bearbeiten]
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');
}
