HTML5 und CSS3 mit Hilfe von Modernizr verwenden

Modernizr ist eine praktische Open Source JavaScript-Library, um schon heute HTML5 und CSS3 Elemente für Webseiten-Projekte nutzen zu können. Das Script funktioniert eigentlich recht einfach. Es stellt fest, welche HTML5 und CSS3-Funktionen der jeweils verwendete Browser unterstützt und welche nicht, und fügt dann automatisch entsprechende CSS-Klassen in den html-Tag der Webseite ein. Mit Hilfe dieser CSS-Klassen kannst du dann in deinem Stylesheet arbeiten, und entsprechende Styles für moderne Browser, sowie Fallback-Lösungen für ältere Browser definieren. Modernizr ist also besonders hilfreich, um moderne Features wie @font-face, Multiple Backgrounds oder HTML5-Video zu verwenden, und dennoch alternative CSS-Styles für Browser anbieten zu können, die diese Features noch nicht unterstützen.

1. So funktioniert Modernizr

Um Modernizr verwenden zu können, musst du dir als erstes das aktuelle Script (derzeit 1.6, letztes Update am 25.10.2010) auf der Webseite von Modernizr herunterladen.

Am besten du sortierst das Script modernizr-1.6.min.js in einen extra Ordner (z.B. mit dem Namen js) ein. Dann lädst du diesen Ordner auf deinen Serverplatz hoch. Innerhalb des head-Tags deiner Webseite musst du jetzt noch das Script aufrufen. Dazu fügst du folgenden Code-Schnipsel innerhalb deines head-Tags ein (vergiss dabei nicht den Pfad auf deinen eigene Dateipfad anzupassen):

<script src="/js/modernizr-1.6.min.js"></script>

Jetzt musst dem html-Tag deiner Webseite noch die CSS-Klasse „no-js“ geben:

<html class="no-js">

Diese no-js CSS-Klasse wird dann mit Hilfe des Scripts automatisch in die CSS-Klasse js geändert. Außerdem prüft das Script, welche HTML5 und CSS3 Features unterstützt, bzw. nicht unterstützt werden. Die Auswertung diese Browser-Überprüfung durch Modernizr wird dann in Form von CSS-Klassen im html-Tag angegeben. Hier ein Beispiel:

<html class="js canvas canvastext no-geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity cssanimations no-csscolumns no-cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface">

Eine genaue Beschreibung aller verwendeten CSS-Klassen findest du in der Modernizr-Dokumentation. Hier kannst du dir auch jeweils ein Code-Beispiel für das jeweilige Feature anschauen.

Modernizr nutzen
Die Beschreibung zur Verwendung der CSS3-Eigenschaft box-shadow.

Entsprechend dieser CSS-Klassen kannst du jetzt dein Stylesheet anlegen. Möchtest du also einen box-shadow verwenden, falls der jeweilige Browser diese Eigenschaft unterstützt, kannst du deine Styles mit der CSS-Klasse .boxshadow angeben. In der Standard-Ansicht kannst du dem Div dann stattdessen einen einfachen Rand mit Hilfe der CSS-Eigenschaft border geben. Hier ein Code-Beispiel:

div.box {
   border-bottom: 1px solid #666;
   border-right: 1px solid #777;
}
.boxshadow div.box {
   border: none;
   box-shadow: #666 1px 1px 1px;
   -moz-box-shadow: #666 1px 1px 1px;
   -webkit-box-shadow: #666 1px 1px 1px;
}

Wie du siehst kannst du also mit Hilfe von Modernizr jede Menge HTML5 und CSS3 Features nutzen, und dann in deinem Stylesheet definieren, wie sich die Webseiten-Elemente verhalten sollen, falls ein Browser die Features noch nicht unterstützt.

2. HTML5 Elemente im Internet Explorer

Modernizr ermöglicht dir auch verschiedene HTML5-Elemente wie <section>, <header>, <aside> oder <video> zu nutzen. Diese Elemente werden zwar nicht vom Internet Explorer 6-8 unterstützt, du kannst die Elemente aber nutzen und mit CSS stylen.

3. Die Modernizr-Library nach deinen Bedürfnissen anpassen

Falls du genau weisst, welche HTML5 und CSS3-Elemente du für dein Projekt nutzen möchtest, kannst du Modernizr jetzt auch ganz deinen Bedürfnissen anpassen. Derzeit allerdings nur in der Modernizr 2 Beta-Version. Das hat den Vorteil, dass du die Größe des Modernizr-Scripts verringern kannst.

Modernizr nutzen
Mit einem Häkchen kannst du alle Elemente selbst markieren, die du für dein Webseiten-Projekt benötigst.

4. Fazit

Das von Paul Irish und Faruk Ateş Modernizr-Projekt ist natürlich nur eine vorübergehende Lösung. Doch es ermöglicht, moderne Webelemente schon jetzt einsetzen zu können, auch wenn die Unterstützung aller Browser heute noch nicht gegeben ist. So kannst du deine Webseiten mit modernen Elementen ausstatten und für ältere Browser dennoch eine akzeptable Lösung finden. Dieses Prinzip der Webentwicklung, wird auch als Progressive Enhancements bezeichnet.

Hast du bereits eine Webseite mit Hilfe von Modernizr umgesetzt? Was hältst du von der JavaScript-Library und welche Vor- oder Nachteile siehst du darin, HTML5 und CSS3 Features heute schon zu verwenden? Über dein Feedback freue ich mich sehr!

Weitere Infos und Tipps zur Verwendung von Modernizr
  1. Vielen Dank für das Tutorial. Ich hatte schon länger überlegt das nächste Projekt mit Modernizer um zu setzen. Dein Tutorial hat mich noch einmal darin bestärkt.

    LG Oli

    • Hallo Oli,

      danke für dein Feedback, klasse, dass du die Infos zu Modernizr gerade gut gebrauchen kannst. Anfangs scheint die Arbeitsweise mit Modernizr zwar etwas kompliziert, ich denke aber es lohnt sich, wenn man so für geeignete Projekte bereits HTML5 & CSS3 nutzen kann, ohne dass man in älteren Browsern oder IE Probleme bekommt :-)

      Viele Grüße,
      Ellen

  2. Ich bin erst vor ein paar Tagen, also vor diesem Beitrag, darauf gestoßen. Echt genial. Noch habe ich mich nicht viel damit beschäftigt, da es sicherlich auch aufwendig ist, seine Designs umzuändern, bzw. ein neues zu gestalten. Darum auch gleich noch ne Frage: Gibt es Browser die Modernizr nicht unterstützen (IE5)?

    • Hallo Andre,

      freut mich, dass dir der Tipp zu Modernizr weiterhilft :-) Puh, ich weiß nicht, ob auch der IE5 noch von Modernizr unterstützt wird. Aber du kannst ja deine no-… Styles entsprechend simpel stylen und die Seite dann in IE5 testen.

      Allerdings wäre es wirklich schade für den Gestaltungsprozess, wenn du selbst so einen alten Browser noch unterstützen müsstest :-)

      Viele Grüße,
      Ellen

      • Das hast du mir schon gesagt und ich werde es auch jetzt berücktsichtigen. Einfach eine Meldung ausgeben, dass der Browser zu alt ist, dass sollte klapen :D
        Danke

  3. Danke vielmals, jetzt hab endlich auch ich das mit den Klassen kapiert, nachdem ich Modernizr gerade bei meinem aktuellen Projekt einsetze. Muss gleich mal entsprechend nachbessern…

    • Hallo Caspar,

      vielen Dank für dein Feedback zum Artikel, freut mich, dass dir der Beitrag weiterhelfen konnte :-)

      Viele Grüße,
      Ellen

  4. Vielen Dank für den Artikel, werde ich mir die Tage auf jeden Fall mal anschauen!
    Allerdings finde ich, dass man bei diesem Thema generell mal diskutieren sollte, inwiefern man alte Browser (IE6, etc.) überhaupt noch unterstützen sollte. Ich bin da ja der Meinung, dass man selbst Schuld ist, wenn man so einen uralten Browser nutzt ;-)
    Im Moment nehme ich bei meinen Projekten meist noch Rückschicht auf den IE 6, aber beim IE 5 hört es dann wirklich auf ;-)

    • Die Frage habe ich mir auch schon gestellt. ;-)
      Im Computerraum unserer Schule sind die Lehrer anscheinend zu faul mal einen neueren Browser wie Firefox oder Chrome zu installieren. Dort ist immer noch er IE5 :-(

      • @Lukas, @Andre,

        ja, ihr habt auf alle Fälle Recht. Ich denke auch, es ist nötig voran zu denken, und wenn es bei einem Projekt möglich ist, veraltete Browser nur noch minimal oder sogar überhaupt nicht zu unterstützen.

        Das hängt wohl auch immer ein wenig von der Zielgruppe einer Webseite ab. Eventuell kann man das Browser-Verhalten der Zielgruppe ja bereits über Google Analytics oder ähnliche Tools analysieren, und so eine an die Zielgruppe optimierte Browser-Unterstützung anbieten.

        @Andre,
        IE5 ist wirklich ein extrem alter Browser. Vielleicht könnt ihr eure Lehrer ja doch noch überreden, auf einen neueren Browser umzusteigen :-)

        Viele Grüße,
        Ellen

        • Ja Ellen,
          IE5 ist sehr alt. Ich werde ihn sicherlich auch nicht mehr unterstützen, jedoch eine Meldung einblenden. Ach, und unsere Lehrer sind dazu viieel zu faul.

  5. IE5? Ich glaub, ich hör nicht recht… :) Und auch der IE6 ist schon 9 Jahre alt. Von daher habe ich für mich entschieden: Nope, diese alte Kiste wird nicht mehr unterstützt. Alternative: browserupdate.org. Schon gehört?
    http://browser-update.org/

    • Echt klasse. Super, dann brauch ich mir keine Gedanken darum machen. Dieser IE Schwachsinn geht mir und sicherlich auch schon anderen auf die Nerven xD

    • Hallo DA Stefan,

      das ist ja ein toller Tipp. Vielen Dank dafür. Das ist etwas, auf das ich schon lange gewartet habe und ich werde den Link natürlich weitergeben ;-)
      Leider gibt das WP-Plugin bei mir JavaScript-Code im Frontend aus. Aber zum Glück kann man die Funktion auch anders einbinden.

      Viele Grüße,

      Stefan

  6. Stefan, der Tipp mit browser-update.org ist Gold wert! 1000 Dank!!

  7. Gern geschehen… Ich hoffe, dass damit auch mehr Webdesigner endlich den IE6 wirklich zu Grabe tragen. Es gibt wirklich fast keinen Grund mehr, diese alte Kiste noch zu unterstützen. Noch dazu ist updaten kostenlos und bringt nur Vorteile!

  8. Zumindest ist Modernizr mal ein Ansatz, eine akzeptable Übergangslösung zu schaffen, bis die neuen Features komplett in den Browsern umgesetzt sind. Allerdings bin ich an zwei Stellen etwas skeptisch.

    „… bis die neuen Features komplett … umgesetzt sind.“ Die Vergangenheit zeigt ja, dass bestimmte Hersteller immer aus der Reihe ausscheren. ICh hoffe, die Revierkämpfe ebben irgendwann ab und man kommt dazu, sich in der Breite an Standards zu halten.

    Zweitens, nichts hält länger als ein Provisorium. Mal sehen, wie lange es nötig sein wird mit dieser Krücke zu leben.

    Ich persönlich stehe auf guten, sauberen und effizienten Code. Leider gefällt mir hierbei die Flut an CSS-Body-Classes eher nicht.

    Aber, dennoch ist Modernizr zumindest mal eine durchdachter Ansatz, der mir generell zusagt. Vielleicht lohnen sich ausgiebigere Tests.

  9. Zukunftsmusik: Gibt es schon erfolgreiche Einsätze für HTML5 und Video-Embedding? Ich mag nicht mehr mit Flash arbeiten ;) Bin mit HTML5 noch sehr unerfahren.

    • MediaElement.js funktioniert sehr gut – allerdings lässt sich die Videobreite nicht responsiv anpassen … :(

  10. @Ramona
    Entscheidend für dein Einsatz von Videos ohne Flash ist ein geeigneter Video Player. Flash sollte als Fallback-Lösung aber alternativ mit angeboten werden.
    Sieh dir mal die Liste von Playern unter http://praegnanz.de/html5video/ an. Die Jungs haben sich echt Mühe gegeben und leisten eine große Hilfestellung.
    Ich persönlich habe den JW-Player eingesetzt, besonders wegen seiner guten Anpassungsmöglichkeiten.

  11. @Ellen, wo hast du denn eigentlich diese schöne Übersicht (table of contents) gefunden, die du unter Punkt 3 dieses Artikels als Grafik eingebunden hast. Auf modernizr.com kann ich sie nicht finden…oder bin ich blind? Grüße Oliver

Hinterlasse eine Antwort

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