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

Die HTML5 Labs von Microsoft Bei Microsofts Internet Explorer von der Einhaltung (oder überhaupt erstmal von der Berücksichtigung) von Standards zu reden, ist so, als ob man glaub...
Tutorial Google Maps API – die Anfänge mit JavaScr... Wie versprochen kommt heute der erste Teil des Google Maps Tutorials, dass sich primär mit der API an sich und JavaScript beschäftigen wird. Bevor wir...
Dynamische Favicons mit Funktion Die Idee ist ebenso genial wie einfach: Wenn sich ein Benutzer erst einmal an einem System angemeldet hat, besteht eine Session. Besteht eine Session ...
50 CSS3 Button Sets Der Trick ist ja der folgende: Je mehr CSS3, desto weniger Grafiken zum nachladen, desto schneller die Seite. Allerdings (und das muss man ganz klar s...

Schreibe einen Kommentar