Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug. Z. B.: Coding for Designers oder Seminar: CSS für Webanwendungen

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.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Patrik
    schrieb am 14.07.2015 um 16:13 Uhr:

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

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 16.07.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!

      Antworten
    • Philipp Nowinski
      schrieb am 18.08.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‘, “);

      Antworten
  2. Daniel
    schrieb am 30.06.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

    Antworten
    • Jonas Hellwig (Autor)
      schrieb am 01.07.2015 um 11:49 Uhr:

      Vielen Dank für die Ergänzung, Daniel.

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: