Framework-Ansatz für CSS-Browserhacks
11. März 2009 von Vrankey
Jeder Webentwickler bzw. Templatedesigner dürfte mindestens einmal auf das Problem unterschiedlicher Darstellungen in verschiedenen Browsern gestossen sein. Mozilla Firefox und Internet Explorer trennen hier teilweise ja schon Welten. Hinzu kommt seit einiger Zeit auch noch die Coexistenz der IE-Versionen 6 (XP) und 7 (Vista), die sich teilweise wie Tag und Nacht verhalten. Weiterhin streben neue Browser wie Apple Safari, Opera und Google Chrome in den Markt der Windows-Browser – keine einfachen Zeiten für Entwickler, die Rücksicht auf Plattformunterschiede nehmen wollen. Oft wünscht man sich hier zumindest einen Rahmen für die Entwicklung externer Stylesheets, der absolut präzise Unterscheidungen für verschiedene Browser ermöglicht.
Dieser Blogartikel soll einen entsprechenden Framework-Ansatz liefern, auf Basis von bisher im Web vorhandenen CSS-Hacks. Vieles dürfte schon bekannt sein, jedoch soll es hier einmal “copy-&-paste-fähig” 
zusammengetragen werden. Berücksichtigt werden die unter Windows bekanntesten Browser Internet Explorer, Mozilla Firefox, Apple Safari und Google Chrome. Ein Opera-only Hack für externe Stylesheets ist darin leider noch nicht erhalten, für Tipps bin ich jedoch jederzeit dankbar.
* html #id { /* Code für Internet Explorer 5 und 6 */ height: 50 px; /* Beispiel-Code für Internet Explorer 5 */ h\eight: 50 px; /* Beispiel-Code für Internet Explorer 6 */ }
*:first-child+html #id {
/* Code für Internet Explorer 7 und (unter Vorbehalt) 8 */ }
body:nth-of-type(1) #id { /* Code für Google Chrome und Safari 3.1 */
}
/* ab hier als Beispiel Code für alle Browser außer Safari */
#id2
{
height: 60px;# /* Das letzte Zeichen hindert Safari an der weiteren Interpretation */ }
Der erste Block beginnt dabei mit einer klassischen Definition der Formattierung eines Elements, hier beispielhaft dessen mit der ID “id”. Der zweite Block wendet nun den ersten Hack an, den so genannten Star-HTML-Hack. Setzt man im Definitionskopf die prinzipiell erstmal unsinnige Erweiterung “* html” vor “#id”, so wird der enthaltene Code nur von Internet Explorer 5 und 6 interpretiert. Ähnlich funktioniert der folgende “Star-plus-HTML-Hack”: stellt man dem Kopf “*:first-child+html” voran, so wird der Rumpf nur von Internet Explorer 7 und 8 beachtet. Beide Hacks sind auf bongard.net im Detail beschrieben.
Möchte man im Star-HTML-Hack ergänzend noch zwischen IE 5 und 6 unterscheiden, so genügt es, im betreffenden Block die relevanten Attribute für jede Version einmal zu definieren und die Varianten für Browserversion 6 mit einem “\” im Eigenschaftsnamen zu versehen.
Auf evotech.net ist der folgende Hack zu finden, der Definitionen für Google Chrome und Safari 3.1 ermöglicht. Auch dieser Workaround funktioniert ähnlich dem Muster des Star-HTML-Hacks. Hier genügt es, vor dem Definitionskopf das präfix “body:nth-of-type(1)” anzuführen.
Das Framework schließt mit einem gewöhnlichen Definitionsblock, in welchem jedoch an einer Codezeile ein “#” anhängt. Dies ist vermutlich der unsauberste Hack, da er Safari an der Ausführung des gesamten folgenden Codes des Sheets hindert. Wendet man diesen Hack an, sollte man sämtlichen Code für Safari vor und sämtlichen Code für alle anderen Browser nach dieser Zeile anbringen.
Für dieses Framework wurde lediglich eine Auswahl an vorhandenen Hacks berücksichtigt, natürlich existieren noch weitaus mehr. Eine umfangreiche Übersicht über diese ist auf Lipferts und Maliks Seite CSS Filter und Browserweichen per CSS zu sehen.
P.S.: Dieses Framework soll keinen Ersatz für ein möglichst plattformunabhängiges Grunddesign darstellen, sondern der zeitnahen Behebung von Fehlern in existierenden Strukturen dienen.
