IE Conditional Comments: Weitere listige Nutzung

Auf bueltge.de hat Frank schön zusammengefasst, wie man conditional comments nutzen kann, um zusätzliche Stylesheets einzubinden, die nur der IE interpretiert. Zusätzlich zeigt er noch Wege mittels PHP und JavaScript auf, um solch eine Browserweiche umzusetzen.

Mich interessierte nun aber nur der Part mit den Conditional Comments, da es meiner Meinung nach eine weitere sehr listige Verwendungsweise dafür gibt.

Die Standardverwendung

Dazu nochmal die fast überall notierte Verwendungsweise:

1. Man gestalte eine Internetseite, setze sie in HTML und CSS um, sodaß sie in Standardbrowsern funktioniert.
2. Jetzt schaue man sich die Seite im Microsoft Browser an – Sie wird normalerweise nicht korrekt dargestellt.
3. Man entwickelt CSS Ergänzungen in einem eigenen CSS File, die Fehler in der CSS Interpretation des IE ausbügeln/umgehen.
4. Man bindet dieses zusätzliche CSS via Conditional Comment beispielsweise so  in das HTML-Dokument ein:

<!--[if IE]>
	<link rel="stylesheet" href="ie_repair.css" mce_href="ie_repair.css" /><![endif]-->

Soweit so gut.

Ich persönliche benutze Conditional Comments sehr gerne: Die einzige Alternative dazu sind Inline Hacks (wie zB. der Underscore Hack), die das CSS meiner Meinung nach unlesbar machen. Zusätzlich habe ich bei solchen “undokumentierten” Hacks immer ein mulmiges Gefühl in der Bauchgegend: Funktionieren diese auch im nächsten IE Browser?

Nachteil der Standardverwendung

Abgesehen davon, dass Conditional Comments dem Designer ein mächtiges Werkzeug in die Hand geben, um Layouts sauber auch im IE zum laufen zu bekommen, hat die Standardverwendung (konditionale Stylesheeteinbindung) auch einen Nachteil:

Die Trennung von CSS Angaben für das selbe Element in mehrere Files.

Möchte man ein Element ändern, muß man die Änderung zuerst im Defaultstyle durchführen. Danach muß man noch prüfen, ob die Änderung auch im IE erscheint und dann dementsprechend im IE-Conditional-Comment-Style schauen, ob das Element dort überschrieben wurde oder nun überschrieben werden muß. Zwei Files, zweimal suchen.

Das kann meiner Erfahrung nach besonders bei komplexen Stylesheets einiges an Zeit konsumieren.

Der Weg des listigen Designers

Nun kann man Conditional Comments ja eigentlich grundsätzlich dazu nutzen, um HTML Code einzubinden, der dann nur im IE angezeigt wird – Man ist ja nicht auf Stylesheet-Einbindungen beschränkt.

Der meiner Meinung nach sehr listige Weg ist nun, dass man ein zusätzliches IE-Wrap-Element um den gesamten Content legt:

  <!--[if IE]>-->
<div id="IE"><!--[endif]-->
<div id="content">
      ...</div>
  <!--[if IE]>--></div>
<!--[endif]-->

Dies erlaubt nun die saubere und gut lesbare Überschreibung von CSS nur für IE – Im gleichen CSS am selben Ort:

...
#content { background-color:red; }
#IE #content { background-color:#ff0000; }
...

Man sieht den Trick und freut sich:  Sauberes und super lesbares CSS für zwei Browser in einem zentralen File ;-)

Mein Fazit: Conditional Comments geben dem Designer ein mächtiges Werkzeug in die Hand, um Layouts mittels eines “Standardwegs” auch im IE zum Laufen zu bekommen. Die an den meisten Orten dokumentierte Standardnutzung bringt meiner Meinung nach unnütze Komplexität in CSS-Definitionen, da Elemente teilweise getrennt in mehreren Files definiert werden müssen. Ein zusätzlicher HTML Request verlangsamt die Seitendarstellung.

Die Benutzung von Conditional Wrapper Elementen erlaubt eine gut lesbare und standardkonforme Definition von IE-Styles am richtigen Ort.