Wie funktionieren CSS Scripte für den IE6 und den IE7 – CSS Hacks

Die unterschiedlichen Darstellungen von Webdesigns beziehungsweise WordPress Themes in den verschiedenen Browsern sind immer wieder ein Thema in der Blogosphäre. Dabei gehen die Meinungen über die Darstellungsanpassungen für den IE6 und den IE7 weit auseinander. Meine persönliche Meinung habe ich ja bereits in meinem Artikel Das optische Grauen im Netz –IE6 zeigt „die Flodders“ des Internets kund getan.

In meinen Augen ist es ein Unding, die Darstellung einer Webseite nicht für den IE6 und IE7 anzupassen. Genauso wenig wie ich ungepflegt, ungewachsen und im Pyjama in den Supermarkt gehe, präsentiere ich meine Webseite zerhackstückelt an die verschiedenen Nutzergruppen.

Niemand zwingt mich eine Webseite ins Netz zu stellen, ergo sollte ich auch niemanden zwingen einen anderen Browser als den seiner Wahl zu nutzen. Für eine ordentliche Darstellung meines Design bin einzig und alleine ich als Betreiber verantwortlich und nicht der Nutzer, der meine Seite ansurft.

Nun reden sich in letzter Zeit einige mit Ausreden wie “das kostet zu viel Zeit” oder “ich kann das nicht” etc. heraus und installieren gar noch Plugins, um IE6 Nutzer darauf aufmerksam zu machen, dass sie mit einer veralteten Browserversion unterwegs sind. Sorry, aber das geht in meinen Augen so ganz und gar nicht! Entweder bekomme ich meine Webseite in den Griff, oder ich bin schlicht und ergreifend nicht dafür geeignet, eine Webseite zu betreiben. Gerade Blogger verbringen viel Zeit mit ihren Blogs, da sollten sie sich auch die paar Minuten nehmen, um die geeigneten Spripte – CSS Hacks – in ihrem Blog zu integrieren.

Für jemanden, der sich ein bisschen mit CSS auskennt, benötigen die notwendigen Spripte – CSS Hacks nicht einmal ein paar Minuten. Wer sich nicht oder weniger auskennt muss sich erst einmal einlesen und die entsprechen Passagen in seinem Design finden, die Probleme bereiten. Inklusive der Installation eines Programmes für verschiedene Browser, den IE-Tester, wie sie Andreas ausführlich beschreibt.

Ein einmaliger Aufwand von maximal ein paar Stunden für wirklich ungeübte, der zuviel ist? Wenn das wirklich eines Eurer Argumente ist, dann frage ich Euch “Ist es auch zuviel Aufwand sich Stunden im Netz auf der Suche nach neuen Artikelthemen und mit dem Schreiben von Artikeln zu beschäftigen?” Eure Webseite, Euer Blog ist Euer Aushängeschild!

Nun aber genug mit meiner Meinung über “die Flodders” des Internets, die es nicht für nötig halten, sich ordentlich in allen gängigen Browservesionen zu präsentieren. Mittlerweile geht es mir auch gehörig auf den Seier, konträre Artikel über dieses Thema zu lesen und mir Lösungsvorschläge anzusehen, die ebenfalls einiges an Zeit gekostet haben und komplett an einer ordentlichen Zielfindung vorbeigehen. Ihr hättet diese Zeit mal lieber darin investiert, Euch um die entsprechenden Scripte – CSS Hacks – für Eure Webseite zu kümmern.

Nachfolgend noch ein kurze Anleitung, wie solche CSS Hacks funktionieren, die ich bis dato eigentlich für total überflüssig gehalten habe, da sie wirklich äußerst einfach sind. Also fangen wir mal ganz am Anfang an: Ein CSS Hack wird in die entsprechende CSS Datei des Themes implementiert. Diese zusätzlichen CSS Skripte sorgen dafür, dass nur einzelne Browser wie zum Beispiel der IE6 oder der IE7 auf die Programmierung ansprechen und alle anderen Browser sie ignorieren. Auf der Seite CSS Hack findet Ihr Anleitungen, wie die einzelnen Browser in der CSS Datei anzusprechen sind und auch noch ein paar weiterführende Informationen zu CSS Hacks.

Nehmen wir als Beispiel einmal den IE6, dessen größte Darstellungsprobleme darin bestehen, dass er einen unsichtbaren Bereich von ca. 20 Pixel ins Design mogelt und so in den meisten Fällen die Sidebar nicht mehr neben dem Hauptbereich sondern darunter dargestellt wird. Das bedeutet, dass ein Bereich des Layouts im IE6 einfach nur ca. 20 Pixel größer ist als in anderen Browsern.

Ergo spreche ich für diesen Bereich den IE6 separat an in meiner CSS Datei und weise ihn an, diesen Bereich einfach 20 Pixel schmaler zu machen. Nehmen wir mal an, mein Bereich heißt <div class=“hauptbereich“>…</div>. In meinem CSS Script steht dafür z.B.
.hauptbereich { width:500px }

Nun möchte ich, dass der IE6 diesen Bereich nur 480 Pixel breit macht. So gebe ich direkt unter diesem Script folgende Zeile ein:
* html .hauptbereich { width:480px }
Abspeichern hochladen und ausprobieren.

Will ich dagegen den IE7 spearat ansprechen gebe ich folgenden CSS Hack in mein Script ein:
* + html .hauptbereich { width:495px }

So arbeite ich mich im entsprechenden Browser schrittweise durch mein Design und füge an den entsprechenden Stellen in meiner CSS Datei zusätzliche Scripte ein, CSS Hacks, wie oben beschrieben. Dabei ist nur wichtig, dass ich die entsprechenden Browser immer einzeln anspreche, also nie den IE6 und IE7 gemeinsam.

In diesem Theme hier waren genau zwei zusätzliche Zeilen an CSS Hacks notwendig, um mein Design ordentlich in IE6 und IE7 anzuzeigen. Ein minimaler Aufwand, für den es sich eigentlich nicht einmal lohnt mehr als ein paar Minuten darüber zu sprechen.