Conditional Stylesheets oder CSS hacks

Jeder der sich schon mal mit dem Thema Webdesign beschäftigt hat, kennt die Probleme der unterschiedlichen Browser. Besonders der Internet Explorer ist ein Kandidat, bei dem man sehr schnell graue Haare bekommt kann.

Meistens werden Hacks verwendet, die nur von bestimmten Versionen / Browsern erkannt bzw. akzeptiert werden und von den anderen als Fehler ignoriert.

Das Problem von solchen Hacks ist unter anderem dafür sorgen das eine CSS nicht mehr validiert werden kann. Um dieses Problem zu umgehen verwenden viele Conditional Stylesheets, die dann vom jeweiligen Browser erkannt und geladen werden. Das sieht dann so aus:

<link rel="stylesheet" type="text/css" media="screen" href="skin/css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="skin/css/ie7.css"  />< ![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="skin/css/ie6.css"  />< ![endif]-->
Nun kann man für die verschiedenen Browser(versionen) die entsprecheden CSS-Definitionen sauber überschreiben. Ist doch super oder?

Diese Variante ist schon deutlich besser als die Verwendung von Hacks im eigentlichen CSS aber hat den großen Nachteil das noch mehr Dateien vom Server geladen werden müssen.

Eine deutlich besser Lösung sieht so aus:
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class=""> <!--<![endif]-->
Hier wird nun in Abhängigkeit von der Browserversion das Tag HTML mit einer CSS-Klasse versehen und man kann nun ganz sauber und ohne Hacks für die div. Versionen CSS-Definitionen erstellen, dass dann z.B. so aussieht::

div.contentpane { width: 510px; }
.ie6 div.contentpane { width: 500px; }


Diese Technik wird z.B. auch vom bekannten http://html5boilerplate.com/ verwendet.

Kommentar schreiben