Feature Detection ohne Modernizr
Von Jonas In diesen Beitrag findet ihr einige Snippets um Browser-Funktionen in Erfahrung zu bringen.
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.
Grundvoraussetzung
Zunächst fügen wir – wie von Modernizr bereits bekannt – die Klasse .no-js in den <html>-Tag der Website ein. Mit Hilfe dieser Klasse können wir herausfinden, dass JavaScript nicht aktiviert ist. Im Folgenden wird nun mit Hilfe von JavaScript bzw. jQuery diese Klasse ausgetauscht und um weitere Klassen ergänzt.
<html class="no-js">
Prüfen ob JavaScript aktiviert ist
Als erstes prüfen wir ob JavaScript aktiv ist. Mit Hilfe von jQuery wird die Klasse .no-js durch .js ersetzt. Das funktioniert natürlich nur, wenn JavaScript aktiv ist.
// Prüfe ob JavaScript aktiviert ist
$('html').removeClass('no-js').addClass('js');
Prüfen ob ein Touch-Screen verwendet wird
Als nächstes prüfen wir ob der Anwender einen Touch-Screen einsetzt. Wenn ja wird dem <html>-Element die Klasse .touch hinzugefügt, wenn nicht .no-touch.
// Prüfe ob es sich um einen Touch-Screen handelt
function is_touch_device() {
return !!('ontouchstart' in window);
}
if(is_touch_device()) {
$('html').addClass('touch');
}
else {
$('html').addClass('no-touch');
}
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');
}
Die Dateiendung *.svg in <img>-Tags durch *.png ersetzen
Vor einiger Zeit habe ich einen Artikel veröffentlicht, in dem erklärt wird, wie mit Hilfe von Modernizr alle SVG-Grafiken im HTML-Code durch PNG-Grafiken ersetzt werden können. Diese Technik lässt sich auch ohne Modernizr einsetzen. Das folgende Beispiel zeigt, wie im HTML-Code alle Dateiendungen *.svg durch *.png ersetzt werden, 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');
}
Feature Detection mit Old-School JavaScript
Die Beispiele in diesem Beitrag basieren allesamt auf jQuery. Es geht auch noch etwas schlanker, mit reinem JavaScript. Auf Github findet ihr in Form des Mini-Modernizr ein hilfreiches Snippet.
Geschrieben von Jonas
Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.
Die JS-Prüfung kann man noch verbessern:
$(‚html‘).removeClass(’no-js‘).addClass(‚js‘);
Hallo Patrik. Das stimmt, hätte ich auch zusammenfassen können. Kürzer ist besser. Ist geändert. Vielen Dank!
Die noJS Prüfung mit jQuery zu machen hat natürlich den Nachteil, dass man erst auf das Laden der Bibliothek warten muss. Wenn diese korrekt eingebunden ist heißt das ja, das man eigentlich bis zum DOMContentLoaded Event wartet. Das kann zu unschönen Blitzern führen wenn man Content explizit über die .no-Js Klasse styled. Ich regel das setzen der Klasse deshalb immer lieber mit VanillaJs direkt als Inline JS im Kopf der Seite.
Also so z.B.
document.documentElement.className = ‚hasJs ‚ + document.documentElement.className.replace(’noJs‘, “);
Hallo Jonas,
zum Thema Touch Screen sei noch angemerkt, dass unter Windows Phone 8 ‚window.navigator.msPointerEnabled‘ abgefragt werden muss, da dort ‚ontouchstart‘ immer false zurück liefert.
Daniel
Vielen Dank für die Ergänzung, Daniel.