HTML/CSS - Bugs & Hacks - Conditional Comments
1. Die Abschnitte
- Überblick
- Grundsätzliche Tipps für den IE
- Conditional Comments
- Double Margin Bug
- Three Pixel Text Jog
- Listen Bug
- Duplicate Characters Bug
- Fieldset Bleed Bug
2. Aber wie?
... bringe ich denn diese ganzen Hacks unter? Mit all den Sondefällen für den IE 6 und 7? Nun dafür haben uns die Microsoft-Programmierer eine echte Hilfe eingebaut. Seit dem Internet Explorer 5 (glaub ich) kann man mit so genannten Conditional Comments zusätzliche Anweisungen in Seiten einbauen, die nur deren Browser versteht. Und das kann man ganz wunderbar auch für CSS-Anweisungen nutzen.
3. Syntax
Eine genauere Übersicht dazu findet ihr unter anderem bei Wikipedia. Generell sieht sie so aus:
<!--[if Bedingung]>
Anweisung
<![endif]-->
Will man also zum Beispiel eine spezielle CSS-Datei einbauen, die alle Hacks für den IE 6 und größer beinhaltet, so sieht das so aus:
<!--[if gt IE 5]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
Allerdings könnte es da Probleme mit dem 8er geben, Darum sollte man besser folgende Anweisung nutzen. Und alle IE-Versionen kleiner als 6 interessieren ja eh keine Sau mehr. Zumindest mich nicht.
<!--[if lt IE 8]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
4. Die Unterscheidung
ich selber habe es mir angewöhnt, nur eine CSS-Datei speziell für den Internet Explorer 6/7 anzulegen. Das liegt daran, dass es Bugs gibt, die nur eine Version betreffen oder aber auch beide.
IE6-Hacks
Hier arbeite ich mit dem so genannten Stern-Hack also zum Beispiel * html element.klassenname. Das wird nur
vom 6er verstanden.
IE7-Hacks
Hier setze ich eine andere Variante eine. Ich selber nenne sie mangels vorhandenem Namen "Stern-Plus-Hack". Und der
sieht so aus: *+html element.klassenname. Das interpretiert nur der 7er.
Hacks für beide Browser
Die schreibe ich ganz normal, da diese CSS-Datei ja nur von unseren Redmond-Monstern eingebunden wird. Wenn ihr euch allerdings
nicht an meine Empfehlung gehalten habt, so könnt ihr mit html* element.klassenname arbeiten. Das interpretieren
beide Versionen.
5. Fazit
Offenbar haben die Programmierer von Microsoft, im Gegensatz zu ihren Vorständen, ein so schlechtes Gewissen ob der teilweise mangelhaften CSS-Interpretation ihrer Browser gehabt, dass sie uns damit wirklich sehr entgegen gekommen sind. Darum nutzt auf jeden Fall die Möglichkeiten, die euch diese Conditional Comments geben. Es erspart euch wirklich eine Menge Ärger. Und viel Arbeit.