HTML: Conditional Comments für mehr Browserkompatibiliät
Jeder Webentwickler kennt das … der Kunde möchte eine schicke neue Website mit allem Schnickschnack. Responsive für alle Smartphones, Tablets und natürlich auch auf dem 30″-Monitor hervorragend dargestellt. Ok, da gibt es viele Möglichkeiten zum Ziel zu gelangen. Alles eine Frage der Konzeption 😉
Nun gibt es aber auch noch eine große Anzahl an Browsern mit denen der geneigte Nutzer durch das weltweite Web surft. Google Chrome, Mozilla Firefox, Safari, Opera, usw… und der vielgeliebt-/gehasste Internet Explorer von Microsoft. In jedem Browser mit jeder Version soll alles toll und auf neuestem Stand der Technik gezeigt werden.
Eines vorweg: Das wird so nicht funktionieren.
Aber den Internet Explorer in den Griff zu bekommen, ohne für jeden CSS-Style einen Hack zu schreiben, bereitet sowieso die meisten Kopfschmerzen.
Hierfür gibt es die “Conditional Comments” (dt: Bedingte Kommentare)
Conditional Comments sind so genannte Browserweichen – ausschließlich für den Internet Explorer (IE) bis Version 9. Innerhalb der standardkonformen Schreibweise für Kommentare wird eine nur für den Internet Explorer lesbare Bedingung geschrieben. Alle anderen Bowser ignorieren diese Anweisungen und behandeln sie wie normale Kommentare. Ab dem IE 10 werden Conditional Comments nicht mehr unterstützt (und sind auch kaum noch notwendig).
Einbinden einer CSS-Datei
Neben einzelnen HTML-Abschnitten ist es möglich, eine eigene CSS-Datei innerhalb eines CC einzubinden. Mit dem Einbinden einer CSS-Datei für eine spezielle IE-Version hat man die höchste Kontrolle über das Layout.
<!-- [if IE 6]> <link href="css/style_ie6.css" rel="stylesheet"/>
<![endif]-->
IEs bis Version 6 geben das HTML in diesem Beispiel aus.
<!-- [if lte IE 6]> IE, entweder Version 6 oder älter!
<![endif]-->
Das HTML innerhalb dieses Conditional Comments wird vom IE 6 oder 8 ausgegeben.
<!-- [if IE 6 | IE 8]> IE Version 6 oder 8 <![endif]-->
Das Verhalten der Conditional Comments kann man auch umkehren um bestimmte HTML-Abschnitte nicht anzeigen zu lassen. Das HTML in diesem Beispiel wird nicht im IE 8 angezeigt.
<!-- [if !IE 8]><![endif]-->
Und so weiter…
Nochmals: Ab dem IE10 werden Conditional Comments nicht mehr unterstützt! Hierzu empfehle ich euch einen Beitrag auf MSDN