Willkommen auf der privaten Homepage von Johannes Jarolim, Salzburg, Österreich. Welcome to the private homepage of Johannes Jarolim, Salzburg, Austria, Europe.

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.

Drei Antworten

  1. 24. December 2008, 12:59
    Comment by Chey
    Erst einmal fröhliche Weihnachten,

    für dies kluge Lösung möchte ich mich vielmals
    bedanken. Hierdurch stehen dem Webstylisten
    meines Erachtens alle Wege vollkommen offen.
    Lässt sich beispielweise ein div-Element absolut
    nicht mit dem IE realisieren so verpasst man diesem
    im einzigen Hauptdokument einfach "display;none;"
    und wird im IE sicher nichts ärgerliches betrachten
    müssen.

    Besten Dank
    Grüße
    Chey
  2. 5. January 2009, 01:23
    Comment by Olaf Lindert
    Hallo,

    Bin mit meinem Freund Herrn Goggle auf Dich aufmerksam geworden.

    Der Weg des listigen Designers....

    die Idee erscheint mir so genial wie auch einfach, doch leider kann ich im ie7 keine verbesserung erkannen. Ich programmiere gerade ein Joomla CMS und ständig zerfetzt es mir die styles. Was mache ich blos falsch ??? Floats habe scheinbar im ie7 keine berechtigung oder was hat her Gates sich beim ie7 gedacht ???

    Gruß

    Olaf Lindert

Hier können Sie eine Antwort hinterlassen

CAPTCHA Image
Reload Image