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

PouchDB – CouchDB mit Javascript Ich habe ja schon desöfteren verkündet, das man nicht alles mit MySQL todschlagen muss. Zum einen gibt es sinnvolle Key-Value-Stores, zum anderen Date...
Kostenlose Bücher für JavaScript Die großen Verlage (zumindest die amerikanischen) hauen ja regelmäßig kostenlose eBooks raus, diese sind weder minderwertig, noch eingekürzt noch triv...
d3.js – Visualisierung von Daten mit Javascr... Seit dem ganzen Hype um das Canvas-Element in HTML5 ist es scheinbar zu einem Volkssport geworden, Libraries für Javascript zu entwickeln, die entwede...
Hakim El Hattabs HTML5 Experimente HTML5 entwickelt sich zu einem Konstrukt, das für Webworker primär aus einem besteht: Einem Konstrukt der über mehr Browserweichen verfügt, als es für...

Schreibe einen Kommentar