Modernizr – HTML5 und CSS3 mit Fallback

Manchmal ist der Teufel ein Eichhörnchen, und scheinbar hat er sich an einem langen Winterabend überlegt, der beste Weg die Menschheit zu quälen wären grundlegend verschiedene Layout-Engines in grundlegend verschiedenen Browsern. Und damit es richtig Spaß macht, hat er zusätzlich dafür gesagt, dass man keinen dieser Browser vernachlässigen kann.

Screenshot der Modernizr Homepage

Während der IE schon so manchen Web-Entwickler dazu getrieben hat, das Wort !important in seinem Editor als Makro anzulegen, so hat CSS3 bzw. HTML5 die Sache nicht grad einfacher gemacht. Ich weiß nicht wie viele Pläne, Grafiken und Poster ich inzwischen schon gesehen habe, die einem erklären, welcher Browser was kann. Das Problem an der Sache ist, das niemand ausreichend Lösungen bietet. Und dann gibt es ja noch die Browser der Fraktion „Ich mag kein HMTL5/CSS3, werde es nie mögen und muss trotzdem unterstützt werden“.

Einen lustigen Ansatz dieses Problem zu lösen bietet Modernizr. Das Javascript testet die CSS3 und HTML5-Verträglichkeit von Browsern und ändert das DOM dahin gehend, das es je nach Fähigkeiten des Browser individuelle Klassen vergibt. Nimmt man zum Beispiel das @font-face. Alle aktuellen Browser können das – irgendwie – und die älteren Browser gar nicht. Entweder habe ich bei den älteren Browsern nun ein Darstellungsproblem, oder eine Browserweiche am Start.

Modernizr geht hin, überprüft die Fähigkeiten des Browsers und setzt in den entsprechenden Elementen die Klassen .font-face und .no-font-face – man kann dann in ein und demselben CSS das Style für Font-Face-fähige Browser definieren, und für solche, die es nicht können. Eine Prima Sache, wie ich finde, auch wenn das Javascript nicht gerade klein ist!

Ähnliche Beiträge

Wieso man Javascript nicht im Head lädt (und im Fo... Ich kann mich noch erinnern als Anfang der 90er Javascript noch ein außerirdisches Mysterium war, und zwei Zeilen Inline-Javascript das höchste der Ge...
Automatoon – HTML5 Animationen Deluxe Bei meinem ersten Besuch auf Automatoon gab es ein ziemliches auf und ab, angefangen bei "Das kann ja jeder" über "Wie haben sie das bloss gemacht" bi...
Neue CSS3 Snippets für die heimische Werkbank Ich habe ja letztens erst über PHP Snippets berichtet und Methoden zu deren Verwaltung. Zumindest bei letzterem bin ich seitdem weder schlauer geworde...
JavaScript Animationen mit $fx() Zur Zeit zeichnet sich ein neuer Trend ab: Micro-Frameworks in Vanilla JavaScript. Die Entwicklung ist auch irgendwo logisch, denn man muss nicht imme...

Schreibe einen Kommentar

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