Conditional Comments und CSS für den Internet Explorer
- CSS
- - 19 Aug, 2008
- Kommentare (8)
CSS und der Internet Explorer. Eine lange Geschichte, die erst seit Erscheinen der 7er Version zu nicht mehr ganz so katastrophalen Auswirkungen im Layout der ein oder anderen Webseite führt. Es gibt zahlreiche Möglichkeiten dem IE seine mangelnden Fähigkeiten in Sachen Webstandardunterstützung zu korrigieren, um damit das gewünschte Layout einer Webseiten erhalten zu können. Neben den sehr bekannten und vielleicht für den ein oder anderen nahe liegenden CSS-Hacks, gibt es mit Conditional Comments einen weiteren Ansatzpunkt. Aber was sind eigentlich Conditional Comments?
Conditional Comments sind spezielle Kommentare mit if-Abfragen bei denen bestimmte Bedingungen ( das Vorhandensein einer bestimmten Version des IE ) erfüllt sein müssen. Diese Kommentare können ausschließlich vom Internet Explorer ab Version 5 interpretiert werden. Das heißt, andere Browser sind bei entsprechenden Abfragen nicht in der Lage die CSS Anweisungen zu verstehen und darzustellen. Somit kann man dem IE eine separate CSS-Datei mit eigenen Anweisungen und Eigenschaften zuweisen.
Wie und wo integriert man Conditional Comments?
Conditional Comments (kurz: CC) können ausschließlich in (X)HTML-Dokumenten integriert werden. Im Vergleich zur üblichen Referenzierung von CSS-Dateien im head-Tag einer (X)HTML-Datei, können Conditional Comments auch innerhalb des body-Tags angewendet werden. CC‘s bieten die Möglichkeit neben allen Versionen des IE, auch zielgerichtet mittels der bereits angesprochenen if-Abfrage, bestimmte Versionen des Internet Explorers anzusprechen oder auszuschließen. Dies kann mittels verschiedener Operatoren und den gewünschten Werten erreichen werden. Werte stellen in diesem Fall die einzelnen Browser-Versionen seit IE5.0 dar.
Welche Conditional Comments Operatoren gibt es?
< !--[if IE 6]> = Diese Variante ohne Operator spricht explizit die Version des IE 6 an.
< !--[if !IE 6]> = NOT-Operator
< !--[if lt IE 6]> = KLEINER ALS-Operator
< !--[if lte IE 6]> = KLEINER ODER GLEICH-Operator
< !--[if gt IE 6]> = GRÖSSER ALS-Operator
< !--[if gte IE 6]> = GRÖSSER ODER GLEICH-Operator
Wichtig ist bei diesem Ansatz, dass die CC's nach Referenzierung der allgemein gültigen CSS-Datei im head-Tag aufgeführt werden. Denn nur so können die so angelegten CSS-Eigenschaften für den IE, die Eigenschaften der stylesIE.css die der styles.css überschreiben.
CSS-Datei für alle IE Versionen
<html>
<head>
<title>Einbinden einer separaten CSS-Datei für den IE per CC</title>
<link rel="stylesheet" media="all" type="text/css" href="css/styles.css" />
<!—[if IE]>
<link rel="stylesheet" media="all" type="text/css" title="default" href="css/stylesIE.css" />
<![endif]-->
</head>
<body>
...
Wenn nun aus Gründen des Weblayouts bspw. alle 5er Versionen des IE separate CSS-Eigenschaften benötigen, können diese wie folgt angesprochen werden.
CSS-Datei für den IE 5.x
<html>
<head>
<title>Einbinden einer separaten CSS-Datei für den IE 5.x per CC</title>
<link rel="stylesheet" media="all" type="text/css" href="css/styles.css" />
<!—[if IE5]>
<link rel="stylesheet" media="all" type="text/css" title="default" href="css/stylesIE5x.css" />
<![endif]-->
</head>
<body>
...
Mittels der Operatoren ist es möglich nicht nur bestimmte Versionen des IE gezielt anzusprechen, sondern sie auch explizit auszuschließen. Das heißt, um beim Ansprechen der 5er Versionen des IE zu bleiben, erreicht man mit dem Operator lt IE6 das selbe Ziel:
CSS-Datei für die IE-Versionen kleiner IE6
<html>
<head>
<title>Einbinden einer separaten CSS-Datei für den kleiner IE6 per CC</title>
<link rel="stylesheet" media="all" type="text/css" href="css/styles.css" />
<!—[if lt IE6]>
<link rel="stylesheet" media="all" type="text/css" title="default" href="css/stylesltIE6.css" />
<![endif]-->
</head>
<body>
...
Wie vielleicht der ein oder andere bei den zahlreichen Varianten bereits vermutet hat, gibt es auch eine Möglichkeit mit CC's Anweisungen für andere Browser als den IE indirekte zu vergeben. Dass heißt, die Referenzierung zur styles.css wird von allen Browsern außer dem IE ausgeführt.
CSS-Datei für Nicht-IE-Browser
<html>
<head>
<title>Einbinden einer separaten CSS-Datei für Nicht-IE-Browser per CC</title>
<!—[if !IE]><!-->
<link rel="stylesheet" media="all" type="text/css" title="default" href="css/styles.css" />
<!--<![endif]-->
<!—[if lt IE6]>
<link rel="stylesheet" media="all" type="text/css" title="default" href="css/stylesltIE6.css" />
<![endif]-->
</head>
<body>
...
Im übrigen können auch mehrere Anweisungen, für verschiedene Versionen des IE, mit einander kombiniert werden.
CSS-Datei für verschiedene IE-Versionen
<html>
<head>
<title>Einbinden einer separaten CSS-Datei für verschiedene IE-Versionen per CC</title>
<!–[if (IE5.0)&(IE5.5)&(IE7)]>
<link rel="stylesheet" media="all" type="text/css" title="default" href="css/stylesIE.css" />
<![endif]-->
</head>
<body>
...
Um dem Internet Explorer separate CSS-Eigenschaften zuweisen zu können, bieten Conditional Comments eine alternative Art der "Browsererkennung", die im Vergleich zu den üblichen CSS-Hacks übersichtlich einer separaten CSS-Datei vorliegen und somit zumindest für etwas mehr Übersicht sorgen. Da Conditional Comments nicht deaktiviert werden können, gilt diese Methode als ein sicherer Weg zur Browser- bzw. Versionsunterscheidung. Ihr Einsatzgebiet ist allerdings nicht auf die Referenzierung von CSS-Links beschränkt, wie ein anderer Artikel zum Thema Alpha-transparente PNG-Grafiken für den IE unter Beweis stellt. Diese Art der Anweisung, kann wie oben bereits erwähnt, auch innerhalb des body-Tags verwendet werden. Wer nun auf den "Geschmack" gekommen ist und mehr über Tipps und Tricks im Umgang mit Conditional Comments und deren Einsatz erfahren möchte, wird im Buch "CSS-Design. Die Tutorials für Einsteiger" fündig.
"CSS-Design - Das CSS Buch"
Webdesign lernen mit CSS-Tutorials. Jetzt kaufen - morgen lesen!
Webstandards Top-5
- CSS3 Tutorial - Menü mit Slide-Effekt
- CSS3 Tutorial - Website-Navigation
- CSS3 Tutorial - Sliding Navigation
- Creative Image-Galleries by jQuery
- Best of jQuery-Tutorials
Werbepartner
Bilder-Galerie
![Flash Development - [Professional Flash Components]](http://webstandard.kulando.de/templates/blog_1575/new_greenmarinee/images/rec-flashdevelopment.jpg)
boh...
Super Übersicht!
Kann man den IE lte 6 nicht auch per import und media aussperren bzw. ihm ein CSS zuweisen und dann per media das CSS überschreiben, ohne daß er es merkt?
20 Aug 2008, 08:22
Der Letzte Absatz ist leider im Vergleich zum Rest des Artikels ein wenig ungenau.
CCs sind keine Browserweiche (ein Programm das einzelne Browser erkennt), sondern eine IE-propitiäre (und IMHO nicht standardkonforme Methode) Methode Stylesheets zuzuweisen. Man kann damit also keine Browser erkennen, sondern nur IEs.
Die "CSS-Datei für Nicht-IE-Browser" ist fast schon wieder ein Hack (Kommentare auf/zu), der den Eindruck erweckt, andere Browser als der IE täten die CC auswerten. Tun sie nicht, für diese sind es einfache HTML-Kommentare, ohne Bedeutung.
Btw: CC funktionieren überall im Dokument und sind nicht CSS-Links vorbehalten.
20 Aug 2008, 09:11
@Nico: Du schreibst: "...Man kann damit also keine Browser erkennen, sondern nur IEs..." Der IE ist also kein Browser? Mit dem Wort Browserweiche sollte lediglich zum Ausdruck gebracht werden, dass der IE auf diese Weise von den anderen Browsern "separiert" werden kann.
Weiterhin schreibst du: "Btw: CC funktionieren überall im Dokument und sind nicht CSS-Links vorbehalten." Mehr dazu im dritten Absatz des zweiten Satzes: "Im Vergleich zur üblichen Referenzierung von CSS-Dateien im head-Tag einer (X)HTML-Datei, können Conditional Comments auch innerhalb des body-Tags angewendet werden."
20 Aug 2008, 12:53
Boh, eine menge holz zu lesen. Nur stellen sich für mir 2 Fragen in den raum
1. Wer surft den noch mit IE6?
2. Und wer will als ernsthafte "Interneter" überhaupt die Produkte von Bill Gates verwenden. Ich nehmen Firefox und evtl noch Opera und bin voll zufrieden...
@ Peter:
1. bisher noch mindestens 20% (je nach Statistik und Seite auch mehr oder weniger)
2. Jeder ernsthafte Interneter sollte seine Seiten auf den Produkten von Bill Gates testen da nunmal die meisten Leute IE benutzen. Ganz einfach ^^ Ich persönlich bevorzuge natürlich auch FF, wobei ich den IE7 nicht mehr ganz so verabscheue wie den IE6. Wenn IE8 ein ordentliches Produkt wird wäre die Entscheidung sicher nicht mehr so einfach.
Ansonsten schöne Zusammenstellung. Ich arbeite zwar schon lange mit CCs aber den ! nicht Operater und den & Verknüpfungsoperator kannte ich noch nicht. Von daher danke für die Infos :)
Danke für deine hilfreichen Tipps!