Personal BabblishingHandmade Lorem Ipsum™

Ich wurde letztens gefragt wie ich das mache dass der Internet Explorer eine andere Headergrafik anzeigt als alle anderen modernen Browser. Ich dachte mir, ich mache mir mal die Mühe und schreib eines der wenigen sinnvollen Postings in diesem Blog.

Das Ganze funktioniert bei mir ohne irgendwelche PHP oder Javascript Browserabfragen. Die Lösung sind spezielle HTML-Kommentare die MS für ihren IE erfunden haben.

Die conditional comments.

In den folgenden Beispielen habe ich zwischen den Zeichen einen extra Leerschlag gemacht, da Wordpress die Sachen sonst nicht richtig darstellt, also einfach zwischen < ! - - [ die Leerschläge rausnehmen, dann müsste das funktionieren. Oder aus dem Textdokument kopieren (unten am Posting).

Die Syntax sieht so aus:

< ! - - [if (conditional) IE (version)]>
HTML zwischen diesen Kommentaren ist nur für IE sichtbar
< ![endif]-->

Für alle IE Versionen (auch die kommenden) sieht das so aus:

< ! - - [if IE]>
IE sucks
< ![endif]-->

Ist man wie ich optimistisch, dass IE 7 voll und ganz Webstandarts rendern kann:

< ! - - [if lt IE 7]>
IE bis Version 6 sucks
< ![endif]-->

lt für alle IE unter der angegebenen Versionsnummer
lte für alle IE unter oder gleich der angegebenen Versionsnummer
gt für alle IE grösser als die angegebene Versionsnummer
gte für alle IE grösser oder gleich der angegebenen Versionsnummer
! für alle IE die nicht der angegebenen Version entsprechen

Mit diesen conditional comments lasse ich den IE auf meiner Seite den div id=”noIE” anzeigen, und mit der selben Technik binde ich ein kleines extra CSS für IE ein.

Das ganze kann man auch umkehren, also Inhalt nur von nicht-IE-Browsern anzeigen lassen. Leider ist das aber nicht mehr valides XHTML:

< IE]>
Gratuliere du verwendest kein IE
< ![endif]>

edit: Habe das Ganze noch in eine Textdatei gelegt, damit copy and paste funktioniert und keine überflüssigen Leerschläge entfernt werden müssen.
→ conditionalcomments.txt

edit2: Natürlich haben darüber schon andere Leute bessere Artikel geschrieben, es ist aber schon spät und ich habe keine Lust diese zu suchen.