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

Javascript spricht MP3 Nein, kein Scherz! ;) JSmad kann mittels der WEB Audio API von HTML5 MP3 in Javascript decodieren. Das funktioniert nativ derzeit nur im Firefox 4, in...
Blackbird – netter Ersatz für alert(); JavaScript Debugging ist meistens eine sehr dumme Angelegenheit, und hierbei rede ich jetzt nicht von "netten" Browsern, die console.log(); unterstütz...
8 Online CSS3 Generatoren Frei nach dem Motto: lieber schnell zusammen geklickt, als falsch selbst gemacht, habe ich mal eine Liste von 10 guten CSS3 Online Editoren erstellt. ...
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