CSS: Conditional Comments vs. Hacks

CSS

Immer wieder kommen Leute auf mich zu und fragen mich nach CSS Hacks für verschiedene Browser. Ich antworte dann meist, dass der Einsatz von Conditional Comments doch viel sinnvoller sei. Der Titel ist somit etwas irreführend, denn eigentlich möchte ich keinen Pro-/Kontravergleich aufstellen sondern euch erzählen warum ich in den meisten Fällen die Conditional Comments den CSS-Hack vorziehe.

Die CSS-Hacks.

Es gibt diverse CSS-Hacks die man für unterschiedliche Browser einsetzen kann. Das Prinzip ist immer das selbe, man nutzt die Fehlinterpretationen der verschiedenen Browser aus um wiederum andere Fehlinterpretationen des Browsers zu korrigieren.

Hier mal zwei Beispiele:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Der "Star-HTML-Hack" sorgt dafür das die Anweisungen
   nur vom Internet Explorer 6 interpretiert werden. */


* html div {
   width: 200px;
}

/* Der "Star-Plus-HTML-Hack" sorgt wiederum dafür
   das die Anweisungen nur vom Internet Explorer 7
   interpretiert werden.
   
   ACHTUNG:
   Ein gesetzter Doctype ist hierfür Voraussetzung. */


* + html div {
   width: 200px;
}

Die Conditional Comments.

Bei den Conditional Comments sieht das Prinzip etwas anders aus. Hier werden für die verschiedenen Browser eigene CSS-Dateien mit den Änderungen angelegt. Mit Sicherheit gibt es über die Conditional Comments noch andere Möglichkeiten, aber ich denke diese ist die sinnvollste und auch verbreitetste Form der Nutzung.

Auch hierfür ein kleines Beispiel.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* Der "normale" Stylesheet für alle gängigen Browser. */
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

/* Ein Stylesheet mit den Änderungen
   für den Internet Explorer 6 */

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

/* Ein Stylesheet mit den Änderungen
   für den Internet Explorer 7 */

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

In den im Beispiel genannten Dateien ie6.css und ie7.css sind dann natürlich nur die Anweisungen vorhanden die von dem jeweiligen Browser falsch interpretiert werden.

Bei dem Aufbau der Bedingung sind noch weitere Möglichkeiten vorhanden. So könnte man zum Beispiel auf alle Internet Explorer kleiner dem IE8 prüfen.

1
2
3
4
5
6
7
8
9
10
11
/* Das "lt" steht für less-than, also kleiner-als */
<!--[if lt IE 8]>
    <link rel="stylesheet" href="ie.css" type="text/css" media="screen" />
<![endif]-->

/* Diese Bedingung hätte den selben Effekt.
   "lte" steht für less-than-equal und
   ist somit der "kleiner-gleich-Operator" */

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

Die selben Möglichkeiten bestehen auch in die andere Richtung. Mit "gt" und "gte" lässt sich prüfen ob ein Browser größer ist als die angegebene Version. Ausserdem wird in Conditinal Comments der nicht-Operator unterstützt. Dieser wird durch ein Ausrufezeichen gekennzeichnet.

1
2
3
4
/* Kein IE bekommt diesen Stylesheet zu sehen */
<!--[if !IE]>
    <link rel="stylesheet" href="non-ie.css" type="text/css" media="screen" />
<![endif]-->

Warum Conditional Comments?

Der Einsatz von Conditional Comments im Gegensatz zu den CSS-Hacks hat mehrere Vorteile. Zum einen erzeugt ihr mit den Conditional Comments validen Quelltext, dies ist bei CSS-Hacks oft nicht der Fall. Zum anderen ergibt sich der Vorteil der Zukunftssicherheit. Auch wenn es unwahrscheinlich sein mag, besteht doch die Möglichkeit das auf einen Hack in Zukunft ein anderer Browser oder eine neue Browserversion reagieren. Ihr müsst bei dem erscheinen von neuen Browsern/Versionen also immer ein wenig drauf achten ob alle Hacks noch so arbeiten wie sie sollen.

Das soll es von mir zu diesem Thema fürs erste gewesen sein. Nun bin ich auf eure Meinungen, Anmerkungen und Verbesserungen gespannt. Seid ihr evtl. anderer Meinung?

FacebookRSS Feeds

Ein Kommentar zu “CSS: Conditional Comments vs. Hacks”

  1. TYPO3: CSS und JS mit Conditional Comments einbinden » Nikonierer

    3. April 2012 um 22:33

    […] möchte ich euch einen kleinen Tipp geben, wie ihr CSS und JavaScript mit Conditional Comments via TypoScript einbinden […]