Conditional-Comments für Internet Explorer im Beispiel

Mittwoch, 24 Oktober 2007 08:57 MET

Thema:
Webgestaltung  
Stichworte:
, , ,  
 
Dekorationsgrafik: Liste von Beispielen
Conditional-Comments für Internet Explorer im Beispiel [hyperkontext | Weblog]

Obwohl Conditional-Comments zur Unterscheidung von IE Win Versionen überall in einer HTML-Seite eingesetzt werden können, ist diese proprietäre Funktion vor allem zum Einbinden verschiedener oder zusätzlicher CSS (Cascading Style Sheets)-Angaben geeignet.

Damit lassen sich sogenannte Hacks – auch Workarounds genannt – für diverse IE-Versionen kompakt in Quarantäne-Dateien auslagern.

Kurzeinführung

Der Internet Explorer für Windows hat seit Version 5 (also ungefähr seit dem Jahr 2000) die Möglichkeit eingebaut, mit Hilfe von HTML (Hypertext Markup Language)-Kommentaren exakt angesprochen zu werden. Genannt Conditional-Comments oder auch kurz CC.

Sollten Sie mit CC überhaupt noch nicht vertraut sein, finden Sie im Quellenverzeichnis den Link zu den Erläuterungen des Herstellers mit allen möglichen Anweisungen und Operatoren. Außerdem habe ich weitere Verweise zu ausgewählten Blog-Einträgen zusammengestellt.

Die versteckten und die sichtbaren Kommentare

Wichtig zu wissen ist, dass CC sowohl im Kopfbereich (<head>), als auch innerhalb des Bereiches <body> des HTML-Dokumentes sein können und es zwei grundsätzliche Unterscheidungen dieser speziellen Kommentare gibt:

  1. Versteckte (hidden) CC:
    <!--[if ausdruck]> HTML <![endif]-->
    sind außer für IE Win, nicht sichtbar für andere Programme (Browser) und werden von diesen als irrelevanter normaler HTML-Kommentar behandelt.
  2. Sichtbare (revealed) CC:
    <!--[if ausdruck]><!--> HTML <!--<![endif]-->
    die Bedingungen im Kommentar werden vom IE interpretiert. Alle anderen Programme interpretieren jedoch die Zeilen innerhalb des Conditional-Comment auch (also auch IE bis Version 4 und IE für Mac).

In der Praxis lassen sich diese zwei Eigenschaften nützlich einsetzen.

Vorteile in der Praxis

Obwohl Conditional-Comments zur Unterscheidung von IE Win Versionen überall in einer HTML-Seite eingesetzt werden können, ist diese proprietäre Funktion vor allem zum Einbinden verschiedener oder zusätzlicher CSS (Cascading Style Sheets)-Angaben geeignet.

Damit lassen sich sogenannte Hacks – auch Workarounds genannt – für diverse IE-Versionen kompakt in Quarantäne-Dateien auslagern.

Vorteile auf einen Blick:

  • CSS-Hacks für den IE sind für Validierungsprogramme unsichtbar.
  • verschiedene IE Versionen können in eigene CSS-Dateien ausgelagert werden.
  • Es können damit generell IE Win von anderen Browsern unterschieden werden. Hierzu sind keine Scripts notwendig.
  • Verbraucht weder Server-, noch Client-Ressourcen. Versteckte CC werden von anderen Programmen überhaupt nicht beachtet.

Der einzige Nachteil liegt meiner Ansicht nach darin, dass der Code in jeder einzelnen HTML-Seite direkt enthalten sein muss.

Und um eine immer wieder gestellte Frage gleich zu beantworten: Nein, es ist (leider) nicht möglich, CC direkt in CSS-Dateien zu schreiben.

Praktisches Beispiel

Ich möchte hier ein Standard-Szenario beschreiben, das sich oft beim Aufbau einer Website ergibt:

  1. Einfache CSS-Anweisungen sollen von fast allen Browsern eingelesen werden.
  2. Das komplette CSS-Programm soll von allen standardkonformen Browsern gelesen werden.
  3. Der IE6 braucht einige Hacks, die extra eingelesen werden und einiges von Punkt 2 überschreiben sollen.
    • Der IE5.5 braucht noch zusätzliche Workarounds, die entweder mit den IE6 Hacks inkludiert sind oder extra geladen werden.
  4. Der IE5 soll nur das CSS von Punkt 1 bekommen oder wird mit einem eigenen einfachen Stylesheet bedient.

Ich beschreibe hier die Einbindungen der Stylesheets für die Bildschirmausgabe. Medientypen für Druck und/oder Handhelds können extra, in Kombination oder auch eventuell innerhalb der CSS-Dateien durch @media erfolgen.

Einfachste CSS-Anweisungen für alle Browser laden

Hierhin fallen zum Beispiel die Angabe der Schriftfamilie und einfache Formatierungen der generellen HTML-Elemente.

<link href="einfach.css" rel="stylesheet" type="text/css" />

Alte Browser ausschließen und komplette CSS einbinden

Die folgende Methode würde ich als fast wasserdicht bezeichnen. Sie stellt sicher, dass nur die Browser die Cascading Style Sheets-Anweisungen zur Verarbeitung bekommen, die damit auch umgehen können oder nachher noch durch zusätzliche Anweisungen korrigiert werden.


<!--[if (gte IE 5.5)]><!-->
<style type="text/css" media="screen, projection">
/* \*/
@import url(standardkonform.css); 
/* */
</style>
<!--<![endif]-->

Die Anweisungen Zeile für Zeile:

  1. <!--[if (gte IE 5.5)]><!-->

    Es handelt sich hier um ein sichtbares Conditional-Comment. Das heißt, alle Browser lesen die Anweisungen. Durch die Bedingung greater than equal IE 5.5, sind die Anweisungen jedoch für IE5.0 Win tabu.

  2. <style type="text/css" media="screen, projection">

    Durch die Angabe der Medientypen screen und projection lassen wir schon mal einige ältere Browser, insbesonder Netscape 4 (der würde nur screen alleine verstehen) aussteigen. Diese interpretieren nachfolgende Zeilen überhaupt nicht mehr. Andere Browser lesen nur weiter, wenn es sich um die genannten Ausgabemedien handelt.

  3. /* \*/

    Hier handelt es sich um den sogenannten Commented Backslash MacIE5 CSS Hack. Ein CSS-Kommentar mit Backslash dazwischen, der den antiquierten IE5.2 für den Mac aussteigen lässt und die nachfolgenden Zeilen – bis zur Beendigung des Hacks – nicht interpretiert.

  4. @import url(standardkonform.css);

    Hier wird die CSS-Datei eingelesen. Durch den Import Befehl steigt nun der Rest diverser alter und nicht standardkonformer Programme aus, welche die Medientypen noch ignoriert hatten.

    Ist ein Programm über all diese Hürden gekommen und liest die Datei ein, kann auch angenommen werden, dass CSS (Cascading Style Sheets) auch soweit korrekt interpretiert wird.

  5. /* */

    Ende des Hacks für Mac IE5.2 aus Zeile 3

  6. </style>

    Schließen der Stilanweisungen aus Zeile 2

  7. <!--<![endif]-->

    Schließen des Conditional-Comments

Stylesheets für IE-Versionen lesen

Anschließend werden nun die Stylesheets für Windows Internet Explorer geladen. Alle Anweisungen innerhalb dieser versteckten Conditional-Comments werden von anderen Browsern ignoriert. Demzufolge überprüfen Validatoren hierin enthaltene CSS-Dateien auch nicht.

IE Versionen 5.5 und 6

Zuerst laden wir korrigierende Anweisungen für die IE-Versionen 5.5 und 6.

Diese CSS-Datei enthält dementsprechende Hacks, um einige zuvor geladene Anweisungen zu überschreiben oder zu ergänzen.


<!--[if (gte IE 5.5)&(lt IE 7)]>
<link href="ie_55_6.css" rel="stylesheet" type="text/css" 
media="screen, projection" />
<![endif]-->

IE Version 5

Der IE5 Win hat außer der ersten einfachen CSS-Datei noch keine sonstigen Anweisungen erhalten. Wenn gewünscht, könnten hier beispielsweise noch einige Formatierungen für diese antiquierte Version geladen werden.


<!--[if (lt IE 5.5)]>
<link href="ie_5.css" rel="stylesheet" type="text/css" />
<![endif]-->

Viele Varianten möglich

Das oben gezeigte typische Beispiel ist nur exemplarisch. Zum bedingten Einbinden von CSS (Cascading Style Sheets) gibt es auch andere Methoden und für Anwendungsfälle und Kombinationen von Conditional-Comments noch viele Szenarien.

Abschnitt 1 von 1

Quellenverzeichnis

  1. About Conditional Comments [MSDN (Microsoft Developer Network)]

Externe Verweise dieses Artikels wurden zuletzt am 24. Oktober 2007 auf Relevanz geprüft.

Datum:
veröffentlicht am 24 Oktober 2007, 08:57 MET.
Artikel:
Conditional-Comments für Internet Explorer im Beispiel [hyperkontext | Weblog]
Kurz-URL:
http://hyperkontext.at/s/94
Thema:
Webgestaltung 
Stichworte:
, , ,  

Dieser Eintrag kann nicht mehr kommentiert werden.

Mögliche themenverwandte Artikel aus dem Weblog

Blättern (chronologisch)

älterer Artikel »
Fehler im Firefox 2.0.0.8 kann Seite zerschießen