Andi Portmann – Interessantes aus dem Alltag, Tipps und Tricks, Anleitungen

Webdesign: CSS-Management für den geliebten Internet Explorer.

19. März 2009, 5 Kommentar(e)

Passend zum heutigen Ereignis – dem Veröffentlichungstag des Internet Explorer 8 – habe ich mir gedanken über mein CSS-Management gemacht.

Mit dem Aufkommen der Conditional Comments war es auf einfache Art und Weise – also ohne CSS-Hacks – möglich, eine Internet Explorer Version gezielt anzusprechen.

Diese Möglichkeit nahm ich dankend an und so sah mein Grundgerüst für das CSS-Managenet bald folgendermassen aus:

<link rel="stylesheet" href="bildschirm.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="druckausgabe.css" type="text/css" media="print" />
<!--[if lte IE 6]>
	<link rel="stylesheet" href="ie_6.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 6]>
	<link rel="stylesheet" href="ie_5.css" type="text/css" media="screen" />
<![endif]-->

Mit der Erscheinung des Internet Exlorer 7 ergänzte sich das Grundgerüst nochmals um weitere Zeilen:

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

Mittlerweile gab es also fünf CSS-Dateien, welche es zu pflegen galt. Dieser Umstand machte mich nicht glücklich und so suchte ich nach einer Lösung, welche übersichtlicher in der Wartung war. Schnell war diese gefunden.
Für den Internet Exlorer wurde nur noch eine separate CSS-Datei verwendet, welche für alle Versionen sichtbar war. Innerhalb dieser CSS-Datei konnte jede Version angesprochen werden:

• Ohne Hack, alle Versionen inkl. Version 7
• * html für Version 6 und tiefer
• Attribut /**/: Wert; für Version 5

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

Bislang war ich damit glücklich. Mit dem Erscheinen des Internet Explorer 8 kommt eine neue Version ins Spiel, welche weiterhin den einen oder anderen Fehler beherbergt. Die Anpassung am Conditional Comment ist schnell gemacht. Langsam werden die CSS-Hacks jedoch auch unübersichtlich, zudem gibt es zwar einen Hack für die Version 7, jedoch nicht für Version 7 und tiefer. Aus diesem Grund stelle ich einmal mehr alles wieder in Frage und überlege mir, wieder auf einzelne CSS-Dateien pro Version umzusteigen …

<link rel="stylesheet" href="bildschirm.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="cms/css/druckausgabe.css" type="text/css" media="print" />
<!--[if lte IE 8]>
	<link rel="stylesheet" href="ie_8.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lte IE 7]>
	<link rel="stylesheet" href="ie_7.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lte IE 6]>
	<link rel="stylesheet" href="ie_6.css" type="text/css" media="screen" />
<![endif]-->
<!--[if lt IE 6]>
	<link rel="stylesheet" href="ie_5.css" type="text/css" media="screen" />
<![endif]-->

… oder nur den Internet Explorer 8 separate zu behandeln und alles wie gehabt zu belassen.

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

Es Interessiert mich, wie ihr eure CSS-Dateien organisiert. Gerne könnt ihr eure Erfahrung in den Kommentaren hinterlassen.