Conditional Comments für den Internet Explorer

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

Conditional Comments für den Internet Explorer

In einer idealen Webstandards Welt würde sich alle Webdesigner, Browser und Tools an die Vorgaben des W3C halten. In der Praxis ist das leider nicht der Fall. Insbesondere der Internet Explorer macht in allen Versionen ständig Probleme. Eine Möglichkeit, auch diese Browser dazu zu bekommen, ein Design richtig anzuzeigen sind sogenannte Conditional Comments. Diese Technik gehört nicht zu den Webstandards, kann in der Praxis aber hilfreich sein.

Speziell für den Internet Explorer

Conditional Comments (CCs) sind eine Möglichkeit, dem Internet Explorer ab der Version 5 unter Windows bestimmten Code zusätzlich zu vermitteln. Ein einfaches Beispiel wäre:

Die Befehle  weisen den dazwischenliegenden Text als Kommentar aus, der von Browsern üblicherweise nicht verarbeitet wird. Allein der Internet Explorer erkennt in der Anweisung [if IE] ein Conditional Comment und stellt den Text dar.

Verschiedene Steuerungsmöglichkeiten

Microsoft hat die Conditional Comments so angelegt, dass sie mit verschiedenen Operatoren verfeinert genutzt werden können. Zur Verfügung stehen:

Operator	Effekt
Version	Version des Internet Explorers, etwa 5 oder 6
!	nicht
lt	kleiner als (less than)
lte	kleiner als oder gleich (less than or equal)
gt	größer als (greater than)
gte	größer als oder gleich (greater than or equal)

So meint etwa der Ausdruck [if gte IE 6] alle Internet Explorer der Version 6 oder darüber. Der Ausdruck [if IE 5] betrifft alle Internet Explorer der Version 5.x (unter Windows). Möchten Sie zwischen 5.0 und 5.5 unterscheiden, können Sie bei den Versionen mit Dezimalstellen arbeiten. So meint [if IE 5.0] zwar die Version 5.0, nicht aber die Version 5.5.

Wozu eignen sich Conditional Comments?

Sie können CCs an jede beliebige Stelle in der XHTML-Datei einbauen. Im Beispiel oben liegt der Code zwischen den <body>-Tags. Im <head>-Bereich eignet sich diese Technik, um dem Internet Explorer ein eigenes Style Sheet zuzuweisen.

<link rel="stylesheet" type="text/css" href="allgemein.css" /> <!--[if IE]>

<link rel="stylesheet" type="text/css" href="iebugs.css" /> <![endif]-->

Die Datei allgemein.css enthält hier die korrekten Design-Anweisungen, wie sie die meisten Browser verstehen. Die Datei iebugs.css wird nur vom Internet Explorer zusätzlich geladen. Damit können Anweisungen überschrieben werden, die der IE falsch versteht (z.B. das Boxmodell) oder gar nicht interpretiert (etwa position: fixed;).
Der Vorteil an dieser Methode ist, dass Sie Ihre korrekte CSS-Datei nicht mit Hacks für den IE versehen müssen, sondern diese falschen Anweisungen auslagern können.

Als Nachteil erhalten Sie eine zusätzliche Datei. Allerdings ist es bei größeren Projekten ohnehin oft übersichtlicher, mehrere CSS-Dateien einzubinden, beispielweise unterteilt in Positions-, Schrift- und Farbanweisungen.

Berechtigte Kritik

Wie Jens Meiert beim Thema Boxmodell bereits erklärt hat, ist von den Conditional Comments aus Webstandards Sicht abzuraten. Kommentarklammern dienen dazu, einen Kommentar einzufügen. Stattdessen verstecken CCs nun Anweisungen für einen einzelnen Browser darin. Ein Extrawürstchen speziell für den Internet Explorer, der keinem allgemeinen Standard unterliegt.

Nützlich in der Praxis

Andererseits: Sobald Ihre Designs umfangreicher werden, wird es zumindest mit dem Boxmodell Probleme geben. Entweder Sie ignorieren die fehlerhafte Ansicht im Internet Explorer, verschachteln mehrere <div>-Boxen ineinander, um das Problem zu umgehen, suchen sich passende Hacks oder nutzen Conditional Comments. Alle Methoden sind unzureichend. Jeder Webworker entwickelt hier eigene Vorlieben.

Besondere Aufmerksamkeit könnte den Conditional Comments bei der Veröffentlichung des Internet Explorers 7 zuteil werden. Microsoft hat bereits angekündigt, dass in der neuen Version zahlreiche Bugs beseitigt worden seien, so dass Hacks für aktuelle Versionen des IE nun Fehler im IE 7 erzeugen. Eine Möglichkeit, den IE 7 schnell dazu zu bringen, alte Seiten mit Hacks wieder richtig anzuzeigen, wäre eine spezielle CSS-Datei – eingebaut über Conditional Comments.

Weiterführende Links

Dr. Web: Blitzschnelle Browserweiche.
About Conditional Comments – Die offizielle Erläuterung von Microsoft (engl.).
bs-markup.de: CSS auf Internet Explorer 7 vorbereiten.
Future-proof your CSS with Conditional Comments – Bruce Lawson erklärt, wie man am besten verschiedenen Browsern verschiedene CSS-Dateien serviert (engl.).

Webkrauts