Browser Kompatibilität – CSS Hacks

Da ich gerade wieder an einer Webseite arbeite, darf ich mich (wiedermal) mit Kompatibilitätsproblemen mit alten IEs herumschlagen. Wer kennt das nicht: da gibt es einige schöne neue Funktionen in CSS3 welche genau das tun würden was man braucht, aber unterstützt wird es nur von den allerneusten Browser Versionen so dass man gezwungen ist es trotzdem irgendwie anders hin zu zaubern.

In meiner Verzweiflung habe ich mich auf gemacht in die unendlichen Gefielde des Internets um auf Leidensgenossen und deren Lösungsansätze zu stossen. Bereits nach einigen KB Trafficverbrauch tauchten die ersten hilfreichen Resultate auf, die ich nun hier ein wenig zusammen fassen möchte um euch (und auch mir in der nahen Zukunft) hoffentlich weitere Odysseen zu diesem Thema zu ersparen.

Ich muss sagen, es gibt ziemlich interessante und clevere, aber auch einige ziemlich merkwürdige Lösungsansätze für dieses Problem.

1. Attribute / Selector Hacks

Ganz ehrlich: das so etwas funktioniert hätte ich in meinen kühnsten Träumen nicht erwartet. Das Konzept ist eigentlich simpel, es werden einfach die verschiedenen CSS Interpreter Eigenschaften der einzelnen Browser ausgenutzt und die CSS Regeln so geschrieben dass der Syntax nur in den erwünschten Browsern zur Ausführung kommt.

Hier ein kleiner Auszug aus den bekannten Attribute Hacks welche mir bisher ganz nützlich waren. Um eine längere Liste zu sehen klicke hier.

2. Konditionelle CSS Stylesheets

Ein etwas anderer Ansatz ist für verschiedene Browser komplett verschiedene CSS Files zu schreiben. Je nachdem was für ein Browser der User verwendet wird dann das entsprechende CSS File geladen und die anderen ignoriert. Sinn macht es hier wohl ein globales „Basis-Stylesheet“ zu schreiben welches für alle Browser gilt und dieses dann gegebenenfalls mit Browser-spezifischen Stylesheets zu überladen.

3. Konditionelle Klassen

Interessant finde ich auch den Ansatz der konditionellen Klassen da er das Aufteilen des Stylesheets in mehrere Dateien umgeht. Dies ist eine ganz simple Anwendung dieses Ansatzes um euch die Idee dahinter zu zeigen. Es geht aber auch noch ein wenig ausgeklügelter. Wie erfahrt ihr hier.

Quellen

Danke vielmals an Paul Irish, sein Blog hat mir sehr geholfen bei diesem Thema. Dass er sich mit HTML und CSS auskennt ist klar, denn er arbeitet unter anderem am HTML5 Boilerplate, aber auch an jQuery und Modernizr mit.

Leave a Reply