Feature Detection für Websites
Von: Jonas, Raimund Ob bestimmte Funktionen im Browser verfügbar sind, könnt ihr mittels »Feature Detection« in Erfahrung bringen. Die Prüfung kann per CSS oder JavaScript durchgeführt werden.
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:
Raimund Büchner
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.