+49(0)170 7360372 info@christiane-weigel.de

christiane weigel logo


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” type=”text/css” rel=”stylesheet”/> <![endif]–>

IEs bis Version 6 geben das HTML in diesem Beispiel aus.

<!–[if lte IE 6]>      <p> IE, entweder Version 6 oder älter!</p> <![endif]–>

Das HTML innerhalb dieses Conditional Comments wird vom IE 6 oder 8 ausgegeben.

<!–[if IE 6 | IE 8]> <p>IE Version 6 oder 8</p> <![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]> <!–> <p>Alle nur nicht IE 8</p> <![endif]–>

Hier noch eine kleine Liste anwendbarer Conditional Comments:

<h2>Explizites Einbinden</h2>
<!–[if IE]><h3>Einzelne IE</h3><![endif]–>
<!–[if IE 5]><p>Ausgabe nur von IE 5</p><![endif]–>
<!–[if IE 6]><p>Ausgabe nur von IE 6</p><![endif]–>
<!–[if IE 6]><link href=”css/style_ie6.css” type=”text/css” rel=”stylesheet”/><![endif]–>
<!–[if IE 7]><p>Ausgabe nur von IE 7</p><![endif]–>
<!–[if IE 8]><p>Ausgabe nur von IE 8</p><![endif]–>
<!–[if IE]><h3>Mehrere IE</h3><![endif]–>
<!–[if lte IE 6]><p>Nur IE 6 oder ältere Version</p><![endif]–>
<!–[if gt IE 6]><p>Nur Versionen über IE 6</p><![endif]–>
<!–[if IE 6 | IE 8]><p>IE 6 oder IE 8</p><![endif]–>

<h2>Ausdrücklicher Ausschluss</h2>
<!–[if !IE 5]><!–> <p>Alle nur nicht IE 5</p><![endif]–>
<!–[if !IE 6]><!–><p>Alle nur nicht IE 6</p><![endif]–>
<!–[if !IE 7]><!–><p>Alle nur nicht IE 7</p><![endif]–>
<!–[if !IE 8]><!–><p>Alle nur nicht IE 8</p><![endif]–>

<h3>Kombinationen</h3>
<!–[if !IE 6]><!–><p>HTML-Abschnitt für alle Browser nur nicht IE 6</p><![endif]–>
<!–[if IE 6]><!–><p>HTML-Abschnitt ausschließlich für IE 6</p><![endif]–>

 

Nochmals: Ab dem IE10 werden Conditional Comments nicht mehr unterstützt! Hierzu empfehle ich euch einen Beitrag auf MSDN

christiane weigel logo

kontakt

christiane weigel
#webdesign #webconsulting #grafik
onkel-tom-straße 115
d-14169 berlin-z*dorf
mobil 0170 7360372
email info@christiane-weigel.de

kontaktformular

bitte um infos zu folgenden themen:

datenschutz

8 + 4 =