Während meines letzten Projektes hatte ich bei einer Sonderform von Formularen die Notwendigkeit, für so ziemlich jeden Browser eine Sonderlösung in einem Detail zu schreiben.
Ich mußte FF und IE 6 bis 8 auseinanderhalten. IE6 und 7 direkt anzusprechen, ohne Conditional Comments nutzen zu müssen, ist nicht so schlimm. Mein Ex-Kollege und Mit-Webkraut Dirk Ginader hatte vor einiger Zeit eine interessante Übersicht an Hacks gepostet, mit denen man einzelne Browser und sogar einzelne Versionen dieser Browser ansprechen kann. Zum Zeitpunkt der Veröffentlichung war aber der IE8 noch nicht fertig und Dirk kannte noch keinen Hack.
Ich habe nun einen gefunden, der den IE in Version 8 und 7 anspricht. Das führt dann dazu, daß man danach den Siebener noch einmal separat anprechen muss. Eventuell muss man dann eine weitere Regel für den Sechser einführen, die der Siebener nicht versteht. Hört sich umständlich an, ist es auch. Und es ist auf keinen Fall „schöner Code“. Aber es ist nützlich, wenn man wie ich eine oder einige wenige Korrekturen vornehmen muss und nicht gleich deshalb ein separates Stylesheet erschaffen möchte.
Mein Code sah am Ende folgendermaßen aus:
.formcontainer form legend {
position: absolute;
display: block;
font-weight: bold;
color: #039;
margin-top: -30px;
margin-left: -5px;
*margin-left: 2px; /* für IE6 und 7 */
top /***/: 0px9; /* für IE7 und 8 */
*top: 0; /* für IE6 und 7 */
left: 0;
left /***/: 14px9; /* für IE7 und 8 */
*left: 0; /* für IE6 und 7 */
margin-bottom /***/: 5px9; /* für IE7 und 8 */
*margin-bottom: 0px; /* für IE6 und 7 */
}
Schauen wir uns den Code der Reihe nach mal an: „margin-left“ wird erst normal definiert, also für alle Browser, und dann für IE6 und 7 neu definiert. Der IE8 würde also auch wie Firefox, Safari und die anderen einen Wert von 2px lesen. Bei „top“ hingegen brauchen alle IE den Wert „0px“, alle anderen brauchen den Wert nicht oder misinterpretieren ihn. Deshalb hacke ich erst für den IE7 und 8 und danach für die Versionen 6 und 7.
Nett wird es bei „left“. Hier benötigt nur der IE8 eine Sonderbehandlung. Deshalb schreibe ich erst „left“ für alle Browser. Danach kommt der Hack für die Versionen 7 und 8 und um dem Siebener wieder den korrekten Wert zu geben, muss dieser danach nochmal zusätzlich angesprochen werden.
Niedlich, nicht wahr? 🙂
28. April 2009 um 9:35 Uhr
Also ich persönlich würde IE entfernen
aus dem Markt wenn ich es könnte das ist nichts anderes als ein Problem für die ganzen Web Entwickler. Es scheint das MS nicht viel tut. Naja wir müssen damit Leben leider…
28. April 2009 um 11:31 Uhr
Wären da Conditional Comments nicht sinnvoller?
28. April 2009 um 11:34 Uhr
@Ute: Ich habe früher immer mit Conditional Comments gearbeitet. Mittlerweile möchte ich erstens gerne einen zusätzlichen Request vermeiden und zweitens meinen Code in einer Datei zusammenhalten. Dann muss ich nicht mit Kommentarhinweisen arbeiten, daß es für eine bestimmte regel noch eine sonderregel (oder mehrere) gibt. Oft benötige ich auch nur wenige Sonderregeln. Da habe ich dann wenig Lust, wegen 24 Zeilen CSS (oder weniger) eine extra Datei aufzumachen.
Es ist meine derzeitige Vorgehensweise. Die war vor zwei Jahren schonmal anders und wird sich vielleicht irgendwann wieder ändern.
28. April 2009 um 11:43 Uhr
Meine Güte ist das ein Mist mit dem IE. Danke für das Beispiel, bei Gelegenheit nochmal selbst zerpflügen.
28. April 2009 um 11:56 Uhr
Woah, also das ist das abartigste, was ich in Sachen Hacks bisher gesehen habe. Respekt vor der Arbeit, aber das würde ich nie zulassen.
Was via CC noch möglich wäre: eine alternative body-Klasse auswerfen. Ob sich das aber in diesem speziellen Fall gelohnt hätte, weiß ich jetzt nicht …
Nee, da stellt sich dann wirklich die Frage, ob man nicht einfach sagt: „Leute, das geht verdammt nochmal nicht!
28. April 2009 um 12:05 Uhr
Conditional Comments sind unter anderem deswegen sinnvoll, dass sie Future-Proof sind. Wer sagt dir denn, dass mit dem nächsten Minor-Release von Browser „X“ oder „Y“ nicht einer der Hacks für den IE interpretiert wird und dir die Seite dann zukünftig um die Ohren fliegt?
28. April 2009 um 13:29 Uhr
@Felix: theoretisch hast Du recht. Aber wann ist es Dir unterghekommen, daß es ein echtes Update eines IE gab, nach dem nicht nur ein paar Sicherheitslücken geschlossen wurden sodnern auch der Parser geändert wurde? Ich kann mich an keines erinnern.
Ich glaube auch nicht, daß die das jemals machen werden. Und wenn doch, dann kann ich immernoch einen CC einführen 🙂
Es geht hierbei echt nur um den IE. Die anderen Browser sind zwar auch nicht fehlerfrei und machen auch mal Probleme. Aber nicht so, wie der IE. Der IE ist eine immerwährende Beschäftigungsgarantie als Frontendspezialist.
28. April 2009 um 14:01 Uhr
Halo Jens,
ich denke hier könnte man trotzdem ein Conditional Comment einsetzen und dennoch keine zusätzliche HTTP-Anfrage auslösen: einfach die CSS-Regeln für die IEs im Dokumentkopf notieren.
So würde ich es machen.
Aber ich gehe schwer davon aus, dass dir diese Möglichkeit bekannt ist. 🙂
28. April 2009 um 14:06 Uhr
@Perun: Ja, diese Möglichkeit kenne ich 🙂 Ich nutze sie manchmal, aber selten. Meist bin ich froh, die CSS-Regeln an einer Stelle zu haben. Alles andere veschlechtert die Übersicht.
28. April 2009 um 16:52 Uhr
@Jens Geschmäcker sind verschieden, ich bin froh, wenn ich alles für die IEs nicht im CSS für alle habe. 😉
28. April 2009 um 18:06 Uhr
Ich kann alle Argumente für und gegen deine Entscheidung gegen CC in diesem Fall verstehen.
Bleibt für mich nur noch der Wunsch nach lesbarem Code. 🙂 Andererseits blenden CC (wenn man damit eine eigene CSS-Datei einbindet) den häßlichen Teil ja auch nur aus…
29. April 2009 um 9:25 Uhr
@Jens: Du könntest alternativ mit in Conditional Comments verborgenen und direkt dem folgenden allesumgreifenden DIV-Container mit Klassennamen à la „ie6“, „ie7“, etc. arbeiten. Das dürfte immer noch weit weniger Aufwand sein als die Hacks, und auch mir sind Hacks zu wackelig. Und sie tun mir weh ;o) Jedenfalls könntest Du dann in einem Stylesheet in folgender, zu Deiner oben gezeigten Art ähnlichen Form arbeiten:
.formcontainer form legend {
left: 0;
}
.ie7 .formcontainer form legend {
left: 0.5em;
}
.ie6 .formcontainer form legend {
left: 0.5em;
}
Je nach Verschachtelung/Ausprägung natürlich anders in der Reihenfolge.
29. April 2009 um 9:48 Uhr
/edit:
in dem „direkt dem folgenden allesumgreifenden“ wurde das BODY-Tag herausgefiltert. Es sollte heissen: „direkt dem BODY folgenden allesumgreifenden“
13. Mai 2009 um 13:29 Uhr
Ja die lieben IEs, der 8er ist auch immer noch nicht das was er sein sollte … aber wenigstens besser als 6 und 7 … jetzt müssen die Firmen nur endlich den 6er Updaten und man kann das optimieren für diesen vernachlässigen 😀