JavaScript - Feature Detection - Versionsgeschichte

134.3.74.15: /* SVG */

2022-04-24T08:48:02Z

SVG

134.3.74.15: /* Mini Modernizer */

2022-04-24T08:45:43Z

Mini Modernizer

134.3.74.15: Die Seite wurde neu angelegt: „ https://kulturbanause.de/blog/feature-detection-ohne-modernizr/#comments https://gist.github.com/tomblanchard/11290882#file-mini-modernizr-html Moderne Webs…“

2022-04-24T08:42:06Z

Die Seite wurde neu angelegt: „ https://kulturbanause.de/blog/feature-detection-ohne-modernizr/#comments https://gist.github.com/tomblanchard/11290882#file-mini-modernizr-html Moderne Webs…“

Neue Seite

https://kulturbanause.de/blog/feature-detection-ohne-modernizr/#comments
https://gist.github.com/tomblanchard/11290882#file-mini-modernizr-html

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. (Quelle: Kulturbanause s.o.)

== Snippets ==
=== Mini Modernizer ===
JavaScript überprüfen, Touchscreen überprüfen.

'''Ersetzt folgende Klassen auf dem <html> Element:'''

no-js => js
no-touch => touch

<syntaxhighlight lang="javascript">
<script>
!function(a,b){"use strict";b.documentElement.className=b.documentElement.className.replace("no-js","js"),("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)&&(document.documentElement.className=document.documentElement.className.replace("no-touch","touch"))}(window,document);
</script>
</syntaxhighlight>

@@ Zeile 21: / Zeile 21: @@
 === SVG ===
 Quelle: Kulturbanause s.o.
 Die Dateiendung *.svg in <img>-Tags durch *.png ersetzen, sofern der Browser keine SVGs darstellen kann.

@@ Zeile 5: / Zeile 5: @@
 == Snippets ==
-=== Mini Modernizer ===
+=== Mini Modernizer (JS, Touch) ===
 JavaScript überprüfen, Touchscreen überprüfen.
@@ Zeile 17: / Zeile 17: @@
 !function(a,b){"use strict";b.documentElement.className=b.documentElement.className.replace("no-js","js"),("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)&&(document.documentElement.className=document.documentElement.className.replace("no-touch","touch"))}(window,document);
 </script>
 </syntaxhighlight>