Conditional Comments: saubere Korrekturen für IEs

Autor: Christian Ahmer, erstellt: 26.08.2010, zuletzt geändert: 16.09.2014
Kategorien: Stylesheets, Html

Normalerweise baut man eine Webseite zuerst sauber in einem Browser, der sich am besten an die allgemeinen Standards des W3C hält auf.Ein guter Browser für so etwas ist z.B. der Mozilla Firefox. Im Laufe der Fertigstellung einer Website muss man dann oftmals über den Tellerrand schauen und prüfen, wie die einzelnen Templates und Layouts in den anderen populären Browsern arbeiten.Schaut alles überall gut aus, dann ist das umso besser, aber falls einmal bestimmte Dinge eben nicht wollen, dann muss man speziell korrigieren.

Meistens fällt so etwas leider beim Internet Explorer (besonders Version 6.0) auf, da dieser Browser von Haus aus leider viele Fehler hat, sehr alt ist, aber eben auf vielen PCs derzeit noch läuft - man geht weltweit von ca 10-20% aller internetfähigen PCs aus.

Um nun für Microsofts Lieblinge die gewünschten Detailkorrekturen hinzuzufügen, kann man sich mehrerer Möglichkeiten bedienen.

  • 1) Unterschiedliche Layouts für Unterschiedliche Browser basteln - schlecht.
  • 2) Ausnahmen im Server Side Script einbauen - extrem schlecht.
  • 3) CSS Ausnahmen für bestimmte Layouts in extra Stylesheet einbauen via Conditional Comments - prima!

Man macht also ein paar CSS Korrekturen für den IE6, den IE7, IE8 oder auch alle auf einmal, indem man wie folgt vorgeht:

Im Kopfteil der gewünschten Websitelayouts einfach folgendes reinschreiben:

 

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

Das bewirkt, dass nur im Internet Explorer 6 dieses Stylesheet eingebunden wird. Alle anderen Browser ignorieren diese Conditional Comments einfach. Für sie steht dann dort nichts anderes als ein einfacher Kommentar im HTML.
Man kann aber auch z.B. CSS für alle Browser die neuer als Version 6 sind einbinden:


 
<!--[if gt IE 6]><link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

 

Oder auch kleiner als Version 8:

 


 
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

 

Oder generell checken, ob es ein Internet Explorer ist:

 


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

 

Das schöne an dieser Lösung ist, dass es einfach unheimlich gut wartbar ist. Man teilt nicht das normale CSS File in Extra Klassen auf und lässt es damit für diverse Internet Explorer Versionen zu gigantischer Größe anwachsen, sondern lädt einfach zuerst das Standard CSS File und lädt nur bei den IE Browsern etwaige Anpassungen je nach Version in einem extra CSS File nach.
Und das Wichtigste: Es ist eine Lösung, die dann auch im Validator fehlerfrei durchläuft, es bleibt valides (X)HTML.