• Impressum
• Kontakt

• Hauptseite
• Malerei
• Sonstiges
• Webdesign

Conditional comments und IE-Versionen testen

Ausschliesslich für den Internet Explorer: Eine "Browserweiche"

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

<!--[if IE 6]>
<style type="text/css">
div.beispiel { margin-top: 10px; }
</style>
<![endif]-->

Man beachte die Gross-/Kleinschreibung innerhalb der eckigen Klammern.

Browserfehler mit conditional comments beheben

Gibt es Fehler bei den verschiedenen IE-Versionen, kommt folgendes zum Einsatz (verschiedene Beispiele):

<!--[if IE 5.0]>
<style type="text/css">
li a { display: none; }
</style>
<![endif]-->

<!--[if IE 5.5]>
<style type="text/css">
pre { margin: 0px; }
</style>
<![endif]-->

<!--[if IE 6]>
<style type="text/css">
div#box { width: 90%; padding: 4%; }
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
ul#nav ul { margin-left: -12px; padding-left: 1px; }
</style>
<![endif]-->

Das ist relativ praktisch, im Angesicht der Schwierigkeiten, die die IE-Reihe aufstellt.

Es gibt noch die Möglichkeit verschiedene IE-Versionen gleichermaßen anzusprechen:

<!--[if lt IE 7]>
<style type="text/css"> div#6 { width: 600px; }
</style>
<![endif]-->

<!--[if lte IE 7]>
<style type="text/css"> div#7 { height: 26px; }
</style>
<![endif]-->

Die Buchstaben lt bedeuten "less than". Im ersten Beispiel würden die IE-Versionen bis einschliesslich 6 angesprochen (kleiner als 7) - das heisst alles unter 7 ist gemeint, also ausschliesslich 7.

Das Zeichen lte bedeuten, "less than or equal", also kleiner oder gleich, und lte IE 7 würde den IE 7 einschliessen - also alle IE Versionen von theoretisch 1 bis einschliesslich 7 werden angesprochen.

Um nur den IE 5.0 anzusprechen, muss man
<!--[if IE 5.0]> schreiben.
Denn <!--[if IE 5]> gilt für die ganze Serie IE 5.00-5.99. Es gab übrigens nur 5.0 und 5.5.
Folglich <!--[if IE 5.5]> für die Version 5.5.

Um sich zu vergewissern, ob die IE-Version wirklich authentisch ist, kann man http://useragent.org aufrufen:

Zum Beispiel entspricht MSIE6 in der zweiten Angabe in Klammern dem IE6.

Und mit experimentellen conditional comments kann man natürlich direkt prüfen, ob diese von der jeweiligen benutzten Version angenommen werden. Ob das alles also funktioniert.
Und: Es funktioniert.

Browser Hacks

Man kann in besonderen Fällen die "Browser-Hacks" verwenden, zB solche, die nur den IE 5 ansprechen (das ist zB der Tantek Hack).  

Oder man benutzt conditional comments und Browser Hacks innerhalb derselben Webseite gleichzeitig - was ich auf einigen meiner Seiten früher selbst getan habe. 

Man erreicht mit den conditional comments, dass der IE angesprochen wird, und der IE interpretiert auch alle normalen stylesheets  - aber es kann die Notwendigkeit geben, dass er eben nicht angesprochen wird, aber alle anderen Browser.

Wichtig: man sollte bedenken, dass jede neue Version eines Browsers mit einem Hack anders umgehen könnte - daher verwende ich persönlich nur ungern diese hacks und versuche sie einfach zu vermeiden. Ich glaube, dass auch andere Webdesigner so denken. Denn wenn man sie übermässig oder regelmässig einsetzt, könnte dann irgendwann das Chaos und die unliebsame Überraschung umso grösser sein.

IE5 ausschliessen (mit Browser Hacks)

Der IE5 stellt die grössten Probleme dar. Oft kann ich mir auch nicht anders helfen, als eine reduzierte Darstellungsart für die IE Benutzer zu wählen, zum Beispiel mit dem CSS-Style "display: none;".
Auch andere IE-Versionen können noch nicht alles, ob mit oder ohne conditional comment.
Das gilt zum Beispiel für die vielen Tricks, die man mit Pseudoklassen (besonders li a:hover) anwenden möchte. 

Allgemein bietet sich als Browserhack in Bezug zum IE5 der sogenannte Tantek Hack an.

Für den entsprechenden Selektor wird alles, was hinter der CSS-Eigenschaft voice-family steht vom IE 5 ignoriert.

Man muss ein bisschen "Logik" walten lassen und in Bezug zum Selektor und den zu ihm gehörenden Angaben für die standardkonformen Browser so plazieren, dass sie nach den Anweisungen folgen, die mit

voice-family:"\"}\""; 
voice-family:inherit;

gegeben wurden, denn ab dort bricht der IE 5 den Interpretationsvorgang ab.

Es mag wie folgend aussehen:

ul#nav li a {width: 254px;} 
ul#nav li a {voice-family:"\"}\""; voice-family:inherit; 
width: 190px; }

Das letzte ul#nav li a (width 190px;) ist die Richtigstellung für alle anderen Browser. Man schreibt also die erste Anweisung für den IE 5.

Der IE 5 kann die Anweisungen des ganzen betreffenden Selektors nach voice-family nicht mehr verstehen, jedoch die anderen Browser, die so den für sie richtigen Wert erhalten.

Es lassen sich verschiedene Einsatzgebiete denken. Auch kann man auf diese Weise den IE 5 am einfachsten von einer Formatierung ausschliessen, wenn dieser damit nicht umgehen kann (zB manche absoluten Positionierungen).

Dieser Hack, wie eigentlich alle anderen Hacks, gelten nur für den betreffenden Selektor, man kann also im selben Stylesheet weitere Selektoren aufstellen und auch mit weiteren Hacks versehen. 

Der IE 6 versteht diese Anweisung, also gilt der Tantek-Hack nur für den IE 5.0 und IE 5.5..

Achtung: Der KompoZer kennt diese Anweisung mit voice-family nicht mit diesen Sternchen, Klammern und Schrägstrichen - und wenn man mit dem CSS-Editor des Kompozer das entsprechende stylesheet irgendwo ändert (auch bei anderen Selektoren), geht die Anweisung verloren. 
Man kann solche Hacks entweder in externe Stylesheets auslagern, um sie dort mit notepad zu editieren, oder man erstellt einfach ein zusätzliches stylesheet intern - da man ja gewöhnlich mit dem Kompozer im relevanten stylesheet noch Eingriffe vornimmt.  

Man kann bei google noch weitere Infos suchen "Browser hack+ie 5" oder man schaue bei selfhtml: http://de.selfhtml.org/css/layouts/browserweichen.ht

Oder hier: http://css-hacks.mozork.de/

IE 6 und IE 5 ausschließen (mit Browser Hacks)

Dieser skurril scheinende Selektor funktioniert beim IE6 und IE 5 nicht, bei allen anderen Browsern schon:

head:first-child+body ul#nav li
{ cursor: url(../img/tab.cur); }

Hier wird zum Beispiel ein cursor gesetzt , ohne dass der IE etwas davon mitbekommt. Das heisst, man stellt vor einen Selektor einfach: head:first-child+body

Funktioniert nur, um den IE 6 und IE 5 auszuschliessen, der IE 7 und IE8 versteht head:first-child+body. Auch andere moderne Browser verstehen diesen Selektor. Das übrige Stylesheet wird weiter interpretiert, nur der entsprechende Selektor und seine Regeln bzw. Anweisungen nicht.

Man sollte beachten, dass manche dieser Hacks auch den Netscape (bessonders frühe Versionen) betreffen und auch frühe Versionen des Opera-Browsers  - aber der Netscape ist auch immer seltener im Netz zu sehen. Und die verbreiteten Opera-Versionen sind mittlerweile CSS-kompatibel, stellen keine Probleme auf.

Conditional comment ist einfach <!--[if IE]><![endif]-->

Das conditional comment beruht wirklich auf ganz einfacher Grammatik des html. Und es ist einfacher zu handhaben, als die Browserhacks.

Was ist denn html eigentlich?
Hat man erst mal mit einer Anweisung in Form eines tags angefangen, wird eine Folge erwartet, also bis dass es einen weiteren Befehl gibt, so dass die Anweisung geschlossen wird.
Jeweils Anfang und Ende der Anweisung wird in englischer Sprache als "tag" verstanden.

<!-- Test Kommentar: hier vieles Mögliche -->

Das Zeichen <!-- öffnet den Kommentar und --> schließt den Kommentar. Das heisst, es kann alles mögliche innerhalb dieses Kommentars stehen, bis auf die zeichenfolge -->, denn die würde den Kommentar schliessen.

Ein Kommentar wird normalerweise vom Browser ignoriert!

Conditional comments - die Erklärung

Die folgenden Zeilen:

<!--[if IE 6]>
<style type="text/css">
div { padding-left: 10px; }
</style>
<![endif]-->

bedeuten, dass nur der IE 6 den Bereich zwischen den Kommentar-Anweisungen interpretiert! Der IE versteht [if IE] als Anweisung, also sozusagen als tag.

Das einzelne Zeichen > nach <!--[ if IE]> ist nicht gleich -->, das heisst das Zeichen > wird den Bereich des Kommentars nicht schliessen (Endtag). Das geschieht erst nach <![endif]-->. Der IE versteht letzten gesamten tag zugleich als Endtag jener Anweisungen, die nur für ihn gelten. 

Das schliessende Endtag für den Kommentar ist --> und nicht allein >. 

So steht der Bereich, der für den IE gelten soll, unsichtbar für andere Browser, bzw. sie interpretieren den Bereich als ganz normalen Kommentar.

Nur der IE versteht in der Reihenfolge dieser Anweisungen die jeweiligen Zeichen. 

Im folgenden ein Link zu einer Seite von Microsoft, auf der die Befehle noch mal genauer erklärt werden (auf englisch):

http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Wichtig ist die Beachtung von Klein- und Großschreibung, nur das IE wird gross geschrieben. Ebenso wichtig die übrige Syntax, zB das Ausrufezeichen bei <![endif]-->, sowie bei <!--[if IE 7]> das Leerzeichen vor und nach dem IE. Wenn ein lt oder lte usw. dazwischen steht, so steht das direkt nach dem if, und hat neben sich Leerzeichen: <!--[if lt IE 7]>

Mögliche Fehler (funktioniert nicht?)

<!--[if IE]> funktioniert nicht? 

Zunächst mal muss man überlegen, ob man vielleicht mit einem standalone testet und gleichzeitig eine neuere IE-Version installiert hat (siehe oben).

Wenn man auf der Webseite das conditional comment, das man im Head- oder Body-Bereich gesetzt hat, angezeigt bekommt, ist das ein sicherer Hinweis, dass die Syntax des conditional comment falsch ist
(zB fälschlich: <!--[if IE lt 7]>
statt richtigerweise: <!--[if lt IE 7]>). 

Vielleicht hat man auch eine CSS-style-Anweisung geben wollen, und vergaß die Anweisungen mit <style type> usw. zu kennzeichnen.

Fazit

Mit conditional comments kann der Webdesigner sich auf gewisse Fehler des IE einrichten.

Das ist die korrekte Lösung für den IE: denn es ist sauberes und korrektes (valides) Skript, weil die komplette Anweisung<!-- von modernen Browsern als Kommentar verstanden wird, bis das --> den Kommentar abschliesst.

Den Firefox Browser nehme ich grundsätzlich, radikal,  rigoros und absolut als Standard! Das ist der beste Browser. Das sagen alle, und sie haben alle Recht!
http://www.mozilla-europe.org/de/firefox/

Aber auch Opera sollte man ein Lob aussprechen! Die aktuellen Opera Versionen haben sich ebenso bewährt wie Firefox. 

Ich überprüfe stets mögliche Fehler des IE6, IE7 oder IE8, gelegentlich auch beim IE5. 
Man muss sich freilich überlegen, wieviel Augenmerk man auf jede Kleinigkeit legt, oder man nur das gröbste durchgeht. Man stelle sich vor, dass wir ja alle zwei oder drei Jahre etwa mit einer neuen IE-Version bedient werden, die bisher ja nicht erwarten liessen, dass es besser wird - und mit jeder Version werden wir zu einer neuen Testreihe gezwungen.

Browsen tue ich nur mit Firefox, der mir auch als Referenz auf den CSS-Standard dient (man weiss ohne Browser ja kaum, wie der CSS-Standard aussehen bzw. richtig verstanden werden sollte). Mit dem Opera und auch dem Verstand, kann man dann sicher sein, wenn der Opera dann die Seite auch wie der Firefox anzeigt - und nur noch bei den IE-Versionen der Fehler bleibt.

Die Probleme des Internet Explorers sind bekannt:

Der IE5 und IE 5.5 versteht das für CSS wichtige Boxmodell falsch. Das sind die padding- und border-Diskrepanzen: padding und border werden vom Inhalt abgezogen statt hinzuaddiert. 
Und auch der IE 6 hat so seine zahlreichen Macken-, zB was float angeht und einige andere Positionierungsmethoden, die man in der Praxis regelmässig anwendet. 

Beim IE6 muss anscheinend ein <div> Container, in dem Text steht, mit width oder height definiert werden! Weil sonst der Text stellenweise (im Anzeigefenster des Browsers) tatsächlich verschwinden könnte.

Manchmal ist es beim IE bis Version 6 auch nötig, nicht die gesamte Fensterbreite einer Seite auszunutzen, sondern ein wenig Spielraum zu lassen (also nicht 100% sondern zB 95%), aus Gründen, die ich bislang noch nicht genau erkannt habe. Aber wenn Du eine Seite hast, bei der der IE "ausflippt" und zum Houdini-Künstler wird, und den Text verschwinden lässt, obwohl du width-Werte angegeben hast, aber gleichzeitig die volle Fensterbreite ausgenutzt wird: dann versuche einmal diesen Weg, und der Text ist vermutlich wieder da.

Das min-width funktioniert nicht beim IE bis einschliesslich Version 6. Ein wenn auch dürftiger Ersatz für min-width könnte mit conditional comments erreicht werden. Man weist dann dem Element eigens für Internet Explorer eine bestimmte Breite (oder Höhe) zu, was allerdings den Effekt hat, dass der IE das immer so versteht, und sich nicht auf die mögliche Größenänderung des Fensters bezieht, wie es ja Sinn von min-width oder min-height ist.

Der IE 7 versteht auch noch nicht alles richtig, und auch beim IE8 habe ich einige Schwierigkeiten mit komplexen Navigationsmenüs festgestellt, was aber bei Opera und Firefox alles wunderbar funktioniert (und auch schon bei Firefox 2.0).

Der IE5 wird standardmässig mit Win98 installiert und der IE7 kann von Win98 nicht installiert werden. 
Allenfalls der IE6 kann mit Win 98 installiert werden. Aber viele Win98 Anwender tun das nicht. Es gibt aber weitaus mehr XP-Nutzer, die noch nicht auf IE7 oder IE 8 aufgerüstet haben. Und browsen daher noch mit IE6, der standardmässig mit XP installiert wird.

Das Boxmodell war seinerzeit,  als der IE5 entwickelt wurde, noch nicht verbreiteter Standard, und Microsoft interpretierte das Boxmodell aus eigenen Erwägungen heraus. Es ergibt durchaus Sinn, so vorzugehen, wie der IE5 es tut, doch der Standard ist jetzt einmal anders, und deshalb ist der IE5 falsch im Boxmodell.

Mehr zum Boxmodell: http://www.communitymx.com/content/article (Englisch)

Was ist mit dem IE8?

Den kann man bereits als Release-Version runterladen. Überzeugen kann er mich nicht. Man vergleiche das Seitenscrolling von ihm mit dem von Firefox. Und ich frage mich auch, warum die Webseiten beim IE generell immer noch verhältnismässig grösser oder dichter angezeigt werden, als wie bei Opera und Firefox? Die Schrift erscheint beim IE fetter. Das ist schon ein Makel, weil damit die Webseiten nicht auf jedem Computer dieselben optischen Erscheinungswerte bekommen. Eine Schrift wird bewusst in einer bestimmten Größe oder Dichte gesetzt, und der IE macht alles grösser. Ich werde das in Zukunft auf meinen Seiten berücksichtigen und die Schrift für den IE kleiner machen - muss mir aber davor einige Vergleiche ansehen, bei Computern von Freunden (vielleicht ist es ja nur auf meinem Monitor oder Computer so? - schwer vorstellbar) .

Bald kommt auch html 5 und es scheint, als würde sich die Geschichte (bei Microsoft) wiederholen, da der IE8 gewisse Interpretationen vorweg nimmt, bevor der Standard html 5 veröffentlicht ist. So ähnlich war es bereits beim IE5 und IE6. 

Nun, der IE8 soll einen sogenannten Kompatibilitätsmodus aufweisen, so dass man einen "Knopf" drücken kann, um seine Seiten auch aus der Sicht des IE 7 anzusehen. Eine fragwürdige Option: Würden die Nutzer sich nicht erst recht jetzt fragen, warum sie erst noch einen Knopf drücken müssen, um die Webseiten richtig anzeigen zu lassen? Meiner Meinung nach ein unbewusster Begleiteffekt des Knopfes, der das Zweifeln am Internet Explorer anregt: der Knopf zeigt jetzt, was da beim IE lange Zeit im Argen lag - und ich halte es für eine Mär, dass sich die überwiegende Anzahl der Webdesigner dazu hat hinreissen lassen, in der Vergangenheit ausschliesslich auf den IE7 hin zu gestalten (das war wohl der grosse Traum von Microsoft seit Anfang an). Und das sollte der Sinn dieses Knopfes sein.

Man kann annehmen oder auch nicht, dass der IE8 nun endlich standardkonform werden sollte. Wenigstens konnte ich auf meiner Hauptseite eine Art Unsicherheit des IE7 und auch noch des IE8 feststellen, manchmal zeigt er nämlich das Navigationsmenü falsch an. Sehr merkwürdiges Verhalten.

Nun kam Microsoft auch noch mit dem Gedanken, mittels eines doctype-Switch in <meta>-tag Form Webseiten für den IE 8 abwärtskompatibel zu machen.

Das soll im Klartext heissen, viele Webseiten sind für die Fehler des IE 7 gestaltet worden - und um es zu erlauben, dass der IE 8 diese Seiten richtig anzeigt, kann man die Maschine (Browser) zwingen, die Seite so anzuzeigen, wie sie der IE 7 anzeigt. 

Das wäre nun nicht wie beim conditional comment, wo etwas "richtig gestellt" wird, sondern im Grunde vernachlässigt man hier den Standard. 
Man begeht bei Microsoft denselben Makel, wie damals beim IE6 (doctype switch). Die Lösung ist jedenfalls nicht astrein, - sondern Beleg für die Hilflosigkeit, und wo Kreativität der Problemlösung mit heilloser Inspiration verwechselt wird.

Wenigstens stellt man sicher, dass der Webdesigner die  Freiheit hat, den meta-Tag auch weg zu lassen.

Meine Meinung zum IE8: Conditional comments werden wohl auch zukünftig wichtig bleiben.

Weitere Informationen zu den conditional comments gibt es bei self.html. Dort wird übrigens (auf der unten verlinkten Seite) empfohlen, nicht allzu sehr zwischen den verschiedenen Browsern zu unterscheiden. 

Doch so wie es zur Zeit dort formuliert wird, halte ich diese Empfehlung für wenig praxistauglich. Wenn die IE Version Nummer 6 auch das Boxmodell versteht, dann stellt er zumindest noch einige andere Dinge falsch dar - zum Beispiel gibt es bei "floatenden Elementen" und anderen CSS-Darstellungen immer noch Tücken beim IE6. Ausserdem gibt es immer noch gelegentlich IE5 Nutzer.

Weitere Einzelheiten zu conditional comments bei self.html: http://de.selfhtml.org/...browserweichen.htm#alternative

Verbreitung der verschiedenen Browser im Web

Eine Liste der benutzten Browser und Auflösungen aus meiner eigenen Homepagestatistik: ../img/statistik.png(Stand: Dezember 2008). 

Internet Explorer Nutzer insgesamt: 8332.
Firefox Nutzer insgesamt: 5807. 

Man sieht, wie gross der Stellenwert der Internet Explorer noch ist, was sich auch mit anderen Statistiken (W3c.org) deckt. Es ist aber ein Trend zu erkennen: Der Firefox schliesst auf! Das ist für Webdesigner ein gutes Zeichen. 

Zu den bekannten Bugs der verschiedenen Browser ist folgende Seite aufschlussreich (in englischer Sprache):

http://www.gtalbot.org/BrowserBugsSection/

Es bleibt fraglich, ob der Internet Explorer in seiner 8. Version bisherige Firefox Nutzer zurückholen kann - viel wahrscheinlicher ist, dass er seine Klientel von den bisherigen IE7 Nutzern bekommt. Und der Trend hin zu Firefox, aber - beachtenswert - auch zu Google Chrome   unvermindert weiter geht. Solange der IE sich als Sicherheitsrisiko erweist, und von der Vergangenheit nicht wirklich los kommt, ist das für viele Nutzer eine echte Motivation.

Ich lade mittels conditional comments die Besucher meiner Hauptseite ein, auf Firefox umzusteigen, und zwar durch einen entsprechenden Link zur Mozilla Seite: "Download des Firefox".
Ich habe es einfach satt mit dem Internet Explorer und möchte mithelfen, dass standardkonforme Browser im Web vertreten sind, und die Herausforderungen für den Webdesigner geringer werden.

Meiner Meinung nach sollte so ein solcher Link zwar gut sichtbar sein, aber auch nicht aufdringlich. Niemand lässt sich dazu nötigen, etwas zu tun, wozu er nicht von selbst schon Lust oder Interesse hat. 
Aber man kann es einem erleichtern - ich erinnere mich noch an meine Anfänge der Internetzeit anno 2000, dass ich einfach zu bequem war nach einem alternativen Browser extra zu suchen.
Wichtig ist es natürlich auch, ein conditonal comment zu benutzen, und in diesem den Link einzuschliessen - weil die meisten anderen Browser standardkonform sind (siehe Browser-Statistik) und man einen Nutzer von Firefox nicht anbieten braucht, einen Firefox runterzuladen.

Überlege dir, ebenalls einen solchen Link zu Opera oder Firefox irgendwo auf deiner Hauptseite anzubringen! Das wird bereits einige Male auch von anderen so getan - man kann es nur begrüßen, dass besonders die Webdesigner, eine indirekte Empfehlung bezüglich eines zu wählenden Browsers aussprechen. Wie erwähnt, sehen nur IE-Nutzer diesen Link. 
So können auch wir dazu beitragen, die Einhaltung von Standards für moderne Webseiten populär zu machen.

Übrigens: Die Statistik-Funktion meiner Homepage kommt von php-web-statistik. Es ist ein sehr guter Service. Bei html-Seiten in der Transitional Variante ist der Code, den man auf seinen Hauptseiten integriert, valides Skript.
Es gibt regelmässig Neuerungen der Webstatistik, deren Updates man ziemlich einfach bewerkstelligen kann.