Modernizr.js: Bessere Alternative zu Browserweichen

9. November 2013 · Kategorien: CSS Stylesheets, Internet, JavaScript, Webentwicklung

Modernizr.js

In diesem Artikel möchte ich Modernizr.js vorstellen. Es handelt sich um eine JavaScript-Datei, die den benutzten Browser nach seinen Fähigkeiten überprüft und Dir als Webentwickler mit Hilfe von CSS-Klassen aufzeigt.

Warum sind Browserweichen schlecht?

Lange Zeit waren in der Webentwicklung Browserweichen Gang und Gebe. Eine Browserweiche – ohne die Benutzung von Modernizr.js – könnte zum Beispiel so aussehen:

function isBrowser(name)
{
  var userAgent = navigator.userAgent.toLowerCase();
  var searchString = name.toLowerCase();

  if(userAgent.indexOf(searchString) >- 1)
  {
     return true;
  }
  
  return false;  
}

if(isBrowser("Opera"))
{
  ...
}

if(isBrowser("MSIE"))
{
  ...
}

Warum ist dieses Verfahren nun schlecht?
Nun, Browserhersteller neigen dazu, möglichst viele Stichworte in den UserAgent-String zu setzen, die da eigentlich gar nicht hingehören. Beispielsweise lautet der String meines Browsers (Chrome auf dem Mac) folgendermaßen:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36

Mozilla, Gecko und Safari haben mit Chrome eigentlich gar nichts zu tun. Trotzdem werden sie eingetragen, um eben zu vermeiden, dass Webdesigner nach diesen Stichworten matchen und Features vorenthalten, die der Browser ja eigentlich unterstützen würde.

Ein weiteres Beispiel ist der UserAgent-String vom Internet Explorer 11:

Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

Auch hier taucht wieder Mozilla und Gecko auf. Hinzu kommt, dass das Stichwort “MSIE” im Gegensatz zu den vorherigen Versionen des Internet Explorers nicht mehr enthalten ist. Die Überprüfung aus dem Beispiel wäre also nicht nur schlecht, sondern sogar fehlerhaft.

Modernizr.js: Feature- statt Browserweichen

In den meisten Fällen ist es doch eigentlich irrelevant, welchen Browser ein Besucher der Webseite benutzt. Viel wichtiger ist es doch, welche Fähigkeiten dieser Browser unterstützt. Das können CSS-Klassen wie box-shadow sein, aber auch CSS-Transitions, HTML5-Videos, Canvas-Elemente, WebGL pipapo.
Hier setzt Modernizr.js an: Beim Aufruf der Webseite überprüft das JavaScript den Browser nach den gewünschten Features. Wird ein Feature vom Browser unterstützt, erhält der HTML-Tag des Dokuments eine entsprechende CSS-Klasse.
Vor dem Download müssen die Browserfähigkeiten, auf die überprüft werden sollen, gewählt werden: Umso weniger Fähigkeiten überprüft werden müssen, desto performanter ist die Ausführung. Nach Klick auf Download wird eine angepasste JavaScript-Datei zum Herunterladen angeboten.

Folgendes Beispiel überprüft mittels Modernizr.js und jQuery, ob der Browser das CSS-Attribute box-shadow unterstützt:

<!doctype html>
<!doctype html>
<html>
  <head>
    <title>Modernizr.js Beispiel</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="modernizr.js" type='text/javascript'></script>
    <script type="text/javascript">
      $(function() {
        var boxShadowSupport = $('html').hasClass('boxshadow');
        
        if(boxShadowSupport)
        {
          alert('Browser unterstützt box-shadow.');
        }
        else
        {
          alert('Browser unterstützt kein box-shadow.');
        }
      });
    </script>
  </head>
  <body>
    <h1>Modernizr.js Beispiel</h1>
  </body>
</html>

Über die Webentwickler-Tools Deines Browsers kannst du direkt einsehen, welche CSS-Klassen Modernizr.js hinzufügt. In meinem Beispiel – Chrome Version 30 – kommt da einiges zusammen:

<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

Autor: | Kategorien: CSS Stylesheets, Internet, JavaScript, Webentwicklung

Keine Kommentare zu Modernizr.js: Bessere Alternative zu Browserweichen

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *