kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Feature Detection ohne Modernizr

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.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

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');
}

Beispiel anschauen

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.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

5 Kommentare

  1. Daniel

    Verfasst am 30. Juni 2015 um 15:48 Uhr.

    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

  2. Patrik

    Verfasst am 14. Juli 2015 um 16:13 Uhr.

    Die JS-Prüfung kann man noch verbessern:
    $(‚html‘).removeClass(’no-js‘).addClass(‚js‘);

    • Jonas Hellwig

      Verfasst am 16. Juli 2015 um 11:06 Uhr.

      Hallo Patrik. Das stimmt, hätte ich auch zusammenfassen können. Kürzer ist besser. Ist geändert. Vielen Dank!

    • Philipp Nowinski

      Verfasst am 18. August 2015 um 14:18 Uhr.

      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‘, “);

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.