Diese Methode überzeugt. Statt dass man mit Conditional Comments zusätzliche komplettte CSS-Dateien für den IE einbindet, vergibt man je nach IE-Version eine eigene Body-ID. Dann kann man alle Korrekturen in seinen Hauptstylesheet schreiben und spart sich das Gewurste mit Dateien wie ie6.css, ie7.css und wie sie alle heißen mögen. Außerdem entfallen an dieser Stelle beim Seitenaufruf mit dem Internet Explorer gleich ein paar Requests. Eine rundum feine Technik.
Nie wieder eigene CSS-Dateien für den Internet Explorer
Achtung: Dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind und vermutlich wird niemand mehr auf neue Kommentare antworten.
Kommentare (18)
-
Nikolaus ¶
15. Dezember 2008, 10:48 Uhr
Man könnte ja beide Methoden auch verbinden: Eine CSS-Datei für ALLE IEs, die per Conditional Comments eingebunden wird und die selber wieder auf die Conditional Classnames verweist...
Insgesamt sehe ich aber keinen Vorteil: Ob ich mich jetzt damit aufhalte, die richtige CSS-Datei zu finden oder in einer riesigen CSS-Datei ewig nach der richtigen Stelle suche, macht doch keinen großen Unterschied.
-
Andi ¶
15. Dezember 2008, 11:01 Uhr
Mich überzeugt diese Variante auch nicht. Unter anderem aus dem Grund, dass ich auch meine CSS-Datei(en) valide halten will (was mit manchen ie-Hacks schlicht nicht möglich ist).
Damit das Ganze trotzdem nicht ausartet und schön übersichtlich bleibt, arbeite ich mit einer CSS-Datei per CC. In dieser CSS-Datei werden die unterschiedlichen ie-Versionen per Hack bedient.
So ist Gut und Böse getrennt, wie es sich gehört ;)
-
Karsten ¶
15. Dezember 2008, 11:02 Uhr
Das einfachere Handling ist auf jeden Fall das entscheidende Argument für diese Methode. Aber die geringere Anzahl an Requests jetzt als so positiv darzustellen, halte ich für etwas übertrieben. Wie Aaron schon schreibt, erhöht sich dadurch die Datenmenge die von "netten" Browsern geladen werden muss. Was hier vorteilhafter ist, müsste man - wenn man es als Argument anführen möchte - tatsächlich messen, ansonsten ist es einfach nur eine Behauptung.
Grundsätzlich aber eine interessante Alternative.
-
muhli ¶
15. Dezember 2008, 11:08 Uhr
Naja, je nach Umfang der Website sind das doch schnell mal ein paar Zeilen mehr für den IE. Da lohnt sich die Trennung durchaus =) Die Methode ist an sich wirklich nicht schlecht, allerdings reicht für alles IEs eine einzige per CC einzubindende Datei. Der IE 6 lässt sich einfach per *-html-Hack ansprechen, der IE > 6 ganz normal.
Den einen HTTP-Request mehr für alle IE-Nutzer finde ich durchaus vertretbar, wenn für mich als Entwickler die IE-Hacks vom Rest der Stylesheets sauber getrennt bleiben. -
Peter ¶
15. Dezember 2008, 11:27 Uhr
Zitat Andi:
Mich überzeugt diese Variante auch nicht. Unter anderem aus dem Grund, dass ich auch meine CSS-Datei(en) valide halten will (was mit manchen ie-Hacks schlicht nicht möglich ist).
CSS-Dateien mit kriminellen Hacks sind doch nicht valide, nur weil sie der W3C-Validator wegen der Conditional Comments nicht bemerkt. Die sind schließlich immer noch da und werden verwendet. Ist es wirklich besser bzw. macht es einen Unterschied, ob mal alle invaliden Hacks auf zig Dateien verteilt oder ob man sie alle in einer hat?
Zitat muhli:
Naja, je nach Umfang der Website sind das doch schnell mal ein paar Zeilen mehr für den IE.
Dass das bei vielen Projekten der Fall ist, ist durchaus möglich. Warum das aber eigentlich nie mehr als ein paar Zeilen sein sollten, dazu kommt bald auch noch ein Artikel von mir :)
-
Daniel Harrington ¶
15. Dezember 2008, 12:19 Uhr
Aus meiner Sicht geht es weniger darum, alles einfach zu halten, sondern seine Dateien sauber zu haben. IE-Hacks gehören schlicht nicht zwischen die normalen Styles.
-
Andi ¶
15. Dezember 2008, 12:31 Uhr
Zitat Peter:
CSS-Dateien mit kriminellen Hacks sind doch nicht valide, nur weil sie der W3C-Validator wegen der Conditional Comments nicht bemerkt. Die sind schließlich immer noch da und werden verwendet. Ist es wirklich besser bzw. macht es einen Unterschied, ob mal alle invaliden Hacks auf zig Dateien verteilt oder ob man sie alle in einer hat?
Klar, nur habe ich eine saubere, valide CSS-Datei für die standardkonformen Browser und eine CSS-Datei, welche nicht validiert. Eine CSS-Datei für alle IEs vereinfacht die Wartung meiner Meinung nach und macht den Unterschied.
Zitat Daniel Harrington:
IE-Hacks gehören schlicht nicht zwischen die normalen Styles.
Meine Meingung.
-
ChrisB ¶
15. Dezember 2008, 19:08 Uhr
Zitat Andi:
Mich überzeugt diese Variante auch nicht. Unter anderem aus dem Grund, dass ich auch meine CSS-Datei(en) valide halten will (was mit manchen ie-Hacks schlicht nicht möglich ist).
Die unterschiedlichen IE-Versionen werden ueber Klassen selektiert - da brauchst du, um dem IE abweichende, aber gueltige CSS-Deklarationen vorzusetzen, keine ggf. invaliden CSS-Selektor-Hacks mehr.
Und zum Thema Validitaet kontra nicht-valides einfach "verstecken" hat sich Peter ja schon geaeussert.
Und darueber, ob man die zusaetzlichen/abweichenden Formatierungen fuer den IE gesammelt an einer Stelle haben will, oder dort, wo auch die normalen Formatierungen fuer ein Element/einen Selektor stehen, gehen die Meinungen ja auch auseinander.
Ich halte es auch fuer uebersichtlicher, wenn ich "normal" und "ie-speziell" an einem Ort zusammen vorliegen habe. -
Peter ¶
15. Dezember 2008, 19:15 Uhr
Zitat Daniel Harrington:
IE-Hacks gehören schlicht nicht zwischen die normalen Styles.
Das war auch erst meine Meinung, als ich von dieser Methode las. Es fühlt sich im ersten Moment eben falsch an und ist anders, als man es vielleicht gewohnt ist. Aber dann hab ich nicht wirklich einen handfesten Grund für diese Einstellung finden können und sie entsprechend über Bord befördert.
-
kingduevel ¶
15. Dezember 2008, 19:19 Uhr
Schon wieder ein Thema, wo sich Peter wohl andere Kommentare erwünscht hat und die Leser nicht seiner Meinung sind. Du solltest dir Gedanken machen ;) !
-
Christian Vogt ¶
15. Dezember 2008, 20:19 Uhr
Zitat ChrisB:
Zitat Andi:
Die unterschiedlichen IE-Versionen werden ueber Klassen selektiert - da brauchst du, um dem IE abweichende, aber gueltige CSS-Deklarationen vorzusetzen, keine ggf. invaliden CSS-Selektor-Hacks mehr.
Jo, dann hau mal in deine Selektoren im all-umfassendem Stylesheet ein zoom: 1; hinein, da wird dir der Validator schon sagen ob das richtig oder falsch ist.
Ich für meinen Teil finde die Trennung in mehrere CSS-Dateien auch den besseren Weg, und der eine Request da... meinst du wirklich der interessiert einen IE-Nutzer?
Einziger Vorteil den ich hier sehe ist, das man bei Bugs die sowohl IE6 als auch 7 betreffen, beide Selektoren zusammenfassen kann.
Ansonsten sehen diese massenhaften body-Elemente für mich auch irgendwie nicht sauber aus, man stelle sich vor man würde Serverseitig noch eine Klasse übergeben wollen... das wird ja schauderhaft.
-
Peter ¶
16. Dezember 2008, 09:40 Uhr
Zitat Christian Vogt:
Jo, dann hau mal in deine Selektoren im all-umfassendem Stylesheet ein zoom: 1; hinein, da wird dir der Validator schon sagen ob das richtig oder falsch ist.
Aber wenn es in einem per Conditional Comments eingebundenen IE-Stylesheet steht, ist es doch genau so falsch. Wo ist der Unterschied?
Ich für meinen Teil finde die Trennung in mehrere CSS-Dateien auch den besseren Weg, und der eine Request da... meinst du wirklich der interessiert einen IE-Nutzer?
Wenn, wenn nicht ihn? Immerhin ist sein Browser der langsamste, der kann jede Hilfe gebrauchen.
Ansonsten sehen diese massenhaften body-Elemente für mich auch irgendwie nicht sauber aus, man stelle sich vor man würde Serverseitig noch eine Klasse übergeben wollen... das wird ja schauderhaft.
Also ist es ok, massenhaft proprietären Microsoft-Krempel im Head abzuladen, aber es nicht ok, das gleiche im Body zu machen? Das musst du mir erklären.
-
ChrisB ¶
16. Dezember 2008, 20:28 Uhr
Zitat Christian Vogt:
Jo, dann hau mal in deine Selektoren im all-umfassendem Stylesheet ein zoom: 1; hinein, da wird dir der Validator schon sagen ob das richtig oder falsch ist.
Und wenn er es dir nicht sagt, weil du "falsches" CSS vor ihm versteckst, fuehlst du dich besser?
Zitat Finn:
über diese methode bin ich vor zwei jahren auch schonmal gestolpert. die auswirkungen auf die spezifität haben mich allerdings ebenfalls davon abgehalten, sie jemals produktiv zu nutzen. von "rundum fein" kann leider nicht die rede sein :/
Welche Probleme bzgl. Spezifitaet siehst du denn dabei genau?
Du hast eine Klasse, auf so ziemlich "oberster Ebene", die du den meisten Selektoren einfach voranstellen kannst.
-
Webagentur ¶
24. Juli 2009, 05:51 Uhr
Danke ... diese Methode kannte ich noch gar nicht ... werde ich gleich mal ausprobieren.
Kommentar schreiben
HTML-Sonderzeichen wie < und > müssen maskiert werden! Sie werden sonst als HTML interpretiert und zerstören die Formatierung deines Beitrags. Dieses Tool hilft dabei.
Folgt mir
Kaffeekasse
Ich freue mich über jeden Klick bei Flattr
Kauft mein Zeug!
Infos auf html5-buch.de, kaufen bei Amazon
Infos bei Galileo Press, kaufen bei Amazon
Promote JS
Aaron ¶
15. Dezember 2008, 10:34 Uhr
Hmmm...das macht zwar einiges einfacher, allerdings finde ich daran etwas nicht so toll: User, welche einen "netten" Browser verwenden, laden dann die Korrekturen im CSS-File auch, d.h. haben eine grössere Datei zu laden...