Feature Detection für Websites

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 wurde in der Vergangenheit häufig eine Bibliothek wie Modernizer eingesetzt. Aus heutiger Sicht ist das i.d.R. überflüssig, da CSS und JavaScript selbst mächtig genug sind.

Progressive Enhancement beachten

Das Prinzip des Progressive Enhancement ist Standard bei der Erstellung von Websites und fest die Philosophie der Sprache CSS integriert. Bei Progressive Enhancement wird das Projekt zunächst mit einer Basisfunktionalität für schwache System konzipiert und entwickelt. Damit ist sichergestellt, dass kein Browser eine defekte Website ausgeliefert bekommt. Modernere und leistungsstärkere Systeme (Browser) erhalten anschließend verbesserte Funktionen oder eine hochwertigere grafische Ausgestaltung. Welche Möglichkeiten zur Verfügung stehen, wird mittels Feature Detection ermittelt.

CSS @supports

Die Darstellung von Websites wird mittels CSS gesteuert, daher macht es Sinn, für darstellungsbezogene Abfragen ebenfalls CSS zu verwenden. Mit Hilfe von @supports kann abgefragt werden, ob der Browser eine bestimmte CSS-Eigenschaft interpretieren kann. Eine detaillierte Einführung in CSS @supports haben wir hier veröffentlicht.

@supports (eigenschaft: wert) {
 /* hier folgt der Code, der ausgeführt werden soll, wenn eigenschaft: wert interpretiert werden kann */
}

CSS @media scripting

Ob JavaScript vorhanden ist, kann seit 2024 auch mit einem Media Query geprüft werden. Der folgende Code prüft auf aktives bzw. inaktives JavaScript:

@media (scripting: enabled) {
 /* JS aktiv */
}

@media (scripting: none) {
 /* JS nicht aktiv */
}

CSS @media hover & pointer

Die Art der Bedienung könnt ihr ebenfalls mit einem Media Query herausfinden. Die sog. Interaction Type Queries fragen ab, ob Mouse Over-Effekte möglich sind bzw. wie fein die Spitze des Eingabegeräts ist. Daraus lassen sich Rückschlüsse zum Verwendeten Gerät ziehen, ohne User Agent Sniffing zu betreiben.

@media (hover:hover) {
  /* Hover-Effekte sind möglich */
}

Feature Detection mit JavaScript

Auch mit JavaScript können Features geprüft werden. Wir bevorzugen die zuvor genannten CSS-Lösungen, erklären im Folgenden allerdings auch den älteren Ansatz per JavaScript bzw. jQuery.

Zunächst fügen wir 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');
}

Geschrieben von Jonas

Benutzerbild

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.

Jonas 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
      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
      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 →