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


Google Font API – @font-face einfach verwenden
@font-face ist eine ziemlich nette Sache die einem Cufon und schlimmeres erspart, dummerweise ist @font-face allerdings auch mit einigem Aufwand verbu...


99 Login-Screens als PSD
Login-Screens sind wohl das am meistens vernachlässigte Thema im Bereich der Backend-Entwicklung, dabei gibt es inzwischen recht schöne Möglichkeiten ...


Individuelle Checkboxen ohne JavaScript
Schuster bleib bei deinen Leisten ist nicht immer eine gute Idee! Vor allem dann, wenn man seine Stiefel anstatt gegen die Version aus Gummi auszutaus...


WYSIHTML5 – der schnellere WYSIWYG Editor
Was zur Zeit an WYSIWYG-Editoren für das Web unterwegs ist, ist der totale Overkill. Meistens wird ja TinyMCE oder der FCKEditor genommen, die beide n...

Schreibe einen Kommentar

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