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* htmlfür Version 6 und tieferAttribut /**/: 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.
Ich bin jetzt bei dem Punkt angekommen das ich privat den IE6 nicht mehr unterstützen werde.
Ich muss mich mal am Wochenende hinsetzten und eine Art CSS-Reset schreiben der im IE6 alle Styles zurücksetzt so das nur noch HTML in Reinform ausgegeb wird. So kann der Benutzer den Inhalt lesen und auch duch die Seite navigieren aber Styles bekommt er nicht mehr. Dafür warscheinliche einen Hinweiss das es noch ander Browser auf dieser Welt gibt.
Wie gut sich die Lösung allerdings bei kommerziellen Projekten nutzen läst muss ich erst mal sehen
Den Internet Explorer 6 auf privaten Websites auszuschliessen ist durchaus tragbar. Für kommerzielle Projekte sehe ich schwarz. Wie willst du das dem Kunden verkaufen? Schliesslich geht es hier um Image und evtl. um Gewinn, welcher geschmälert wird.
Erst habe ich auch wie du jeden einzeln <<behandelt>>, werde aber nun wohl eher die letzte Variante nehmen.
Oder (ist aber nicht ernst gemeint) Du erzählst den Leuten Sie benutzen einen alten Browser, obwohl Du die Seite mit dem IE8 besuchst #technickwürze #webstandards #profis lach #profis, glaube das hatten wir schon mal optimiert für xyz.
Ich habe eigentlich nur zwei CSS Dateien, die ich über CC einbinde – einmal für den IE6 und einmal für den IE7.
IE5 unterstütze ich schlichtweg nicht mehr und all meine Projekte sahen im IE8 bis jetzt sehr gut aus, ohne dass ich diesem eine Extrawurst geben musste. 😉
Werde wohl mitte Jahr den IE5 auch aufgeben, ausser der Kunde wünscht es explizit. Den IE8 musste ich bislang auch nur hier im Blog gezielt ansprechen. Die Transparenz in den grossen Titel kriegt auch dieser nicht hin.