Aug. 12 2008
Mit Conditional-CSS browserspezifische Stylesheetangaben verwenden
Zweifellos jeder Web-Designer und -Entwickler stieß bei CSS-Angaben auf Darstellungsunterschiede in verschiedenen – vor allem älteren – Browsern, durch die man gezwungen war weitere Stylesheet-Dateien einzubinden oder CSS-Hacks zu verwenden um eine einheitliche Darstellung erzielen.
Das Kernpunkt des Problemes ist der unterschiedliche Grad der CSS-Implementierung in den verschiedenen Browsern und deren Versionen.
Allan Jardine bietet mit Conditional-CSS eine, wenn nicht sogar die, Lösung des Problems an: Er nahm die Idee der Conditional-Comment-Syntax des Internet Explorers auf und übertrug diese auf CSS-Anweisungen.
Somit ist es nun möglich, einfacher zu wartenden CSS-Code zu schreiben, der sich an die Eigenheiten des jeweiligen Renderers anpassen lässt. Damit sollten sich die nervigen CSS-Bugs auf einfache Weise umgehen lassen.
Unterstützt werden nahezu alle gängigen und exotischen Browser von IE bis Playstation Portable. Wobei zu beachten ist, dass nicht jede Browserversion auf Grund der Eigenheiten vollen Support erhält. Eine genaue Übersicht gibt dazu gibt es hier.
Hauptsächlich wird Conditional-CSS, wie bereits angesprochen, dazu verwendet werden, um festzulegen, ob ein CSS-Ausdruck an den jeweiligen Browser gesendet werden soll oder nicht. Es ist klar, dass man eigentlich auf solche Tricks verzichten möchte, aber in Ausnahmefällen ist C-CSS äußerst nützlich um einen bestimmten Browser anzusprechen anstatt Stunden mit einem Problem sich rumzuplagen.
Jeder CSS-Einzelanweisung oder jedem Anweisungsblock kann eine Bedingung vorangestellt werden.
Hier ein paar Beispiele zur Anwendung:
a.button_active, a.button_unactive {
display: inline-block;
[if lte Gecko 1.8] display: -moz-inline-stack;
[if lte Konq 3.1] float: left;
height: 30px;
[if IE 5.0] margin-top: -1px;
text-decoration: none;
outline: none;
[if IE] text-decoration: expression(hideFocus='true');
}
[if IE] .box {
width: 500px;
padding: 100px 0;
}
Wer sicher näher dafür interessiert, kann das OpenSource-Projekt C-CSS herunterladen und auf dem eigenen Server aufspielen. Eine detailierte Einbaueinleitung für PHP liegt bei.
