CSS Hack Management

09.Oktober 2005

Wo wären wir heute ohne die CSS Hacks? Welcher Webdesigner hätte vor 3 oder 4 Jahren den Sprung zu tabellenlosem Design gewagt ohne durch z.B. voice-family: "\"}\""; sicherstellen zu können, dass das was er da macht auch möglichst überall konsistent läuft? Welcher Webdesigner hätte seinen Kunden erläutern wollen, dass er gern eine zukunftsorientierte Seite erstellen würde, dafür aber auf die Unterstützung des IE 5 verzichten muss? Wohl kaum einer. Hacks haben entscheidend dazu beigetragen Standards voranzutreiben, aber inzwischen sind wir auf dem besten Wege nicht oder nicht mehr so stark auf sie bauen zu müssen.

Strategien

Ganz verzichten können wir auf Hacks noch nicht. Im Sinne einer zukunftsorientierten Webentwicklung sollte man allerdings, wenn man heute eine neue Seite entwickelt, durchaus einen Gedanken daran verschwenden, wie man diese kleinen Helferleins sauber los wird - wenn die Zeit gekommen ist. Das bringt mich dazu ein wenig über derartige Strategien und Lösungswege zu reden.

Möglichkeit 1: Filter

Eine durchaus populäre Methode Hacks zu isolieren sind die Filter. Dabei werden die Hacks in einer gesonderten .css Datei abgelegt und nur an Browser, die sie benötigen ausgeliefert. An der Stelle, in der die Hacks dann im Hauptstylesheet benötigt werden fügt man sie per:


@import "dummy.css";

ein. Browser, die durchaus in der Lage sind standardorientiert zu rendern sparen es sich hier die paar Kilobyte herunterzuladen. Aber das nur am Rande. Ein großer Vorteil dieser Methodik ist, dass man, wenn es an der Zeit ist IE 5 und Konsorten außen vor zu lassen, einfach die nicht mehr benötigten .css Dateien löscht ohne sich durch seine Stylesheets wühlen zu müssen, um jeden Hack einzeln zu entfernen.

Möglichkeit 2: Hacks ans Ende

Möglich ist auch, dass man die Hacks ans Ende seiner Stylesheets verfrachtet und beispielsweise durch Kommentare kennzeichnet.


/* weiterlesen ab hier nur für Internet Explorer, andere Browser könnte das Erbrechen ereilen */
voice-family: "\"}\"";
w\idth
_width
* html

Durch diese Methode kommt man ebenfalls in die glückliche Lage, wie bei der vorherigen Variante, dass man die Hacks einfach löschen kann, wenn sie nicht mehr gebraucht werden, ohne das “schöne” CSS belästigen zu müssen. Die standardkonformen Browser sparen sich hierbei zwar nicht die paar Kilobyte, die das ausmacht, aber wie gesagt es handelt sich dabei um eine verschwindend geringe Speichergröße.

Möglichkeit 3: gezielter Einsatz

Dies ist eigentlich keine gesonderte Möglichkeit, sondern viel mehr sollte man sich vor dem Gebrauch von Hacks ein paar gezielte Fragen stellen:

Wenn man sich diesen Fragen gezielt aussetzt ist es durchaus nicht unbedingt notwendig extra Filter oder Ähnliches zu verwenden. Gezielt eingesetzt nehmen Hacks heute nicht mehr unbedingt viel Platz weg im Stylesheet und je nach dem Zweck der Seite ob privat, geschäftlich oder was auch immer, ist es an einem selbst zu entscheiden wie, wann und wo man die Hacks einsetzt. Nur gezielt sollte man sie nutzen und vor übermäßigem Gebrauch zurückschrecken. Für meine Seite hier waren ca. 10 Zeilen an Hacks notwendig, um alle (?) Browser glücklich zu machen und da ich genau weiß wo sich diese Zeilen befinden brauch ich derzeit weder Filter noch sonstiges einsetzen ich kann die Zeilen einfach editieren wenn es soweit ist. Wenn ich richtig gezählt habe wäre das dann Möglichkeit 4. Andere Gedanken?

Gepostet um 14:00 abgelegt unter CSS, Web Standards 

11 Kommentare bisher.
1. | Jeena Paradies schrieb am 09. Oktober 2005 um 18:39

Also ich nutze eigentlich nur die Conditional Comments um eine extra Datei für alle IE =

2. | Jens Grochtdreis schrieb am 09. Oktober 2005 um 18:41

Ich habe mich früher auch viel mit HAcks beschäftigt. Diese Pahse habe ich spätestens hinter mir, seitdem ich weiß, daß der IE7 kommt und Microsft die meisten Fehler beseitigen will. Jetzt sind die Hacks nicht mehr sicher. Eine Tatsache, die schon immer geprdeigt wurde.
Auch die Anzahl der vielen Hacks hat mich immer gewundert, gebraucht habe ich nur wenige.

Am Ende wird wohl nur der IE5Mac-Hack übrigbleiben (ich nenne ihn immer Heck-Mäck). Alles andere sind doch Hacks ggen den Ie. Die sind zum Entiwckeln nett, am Ende kommen sie ins Körbchen, also in Conditional Comments. Die habe ich in Deinem Artikel vermisst.

Ich habe nie verstanden, warum Menschen Tantecks Hack genomnmen haben, anstatt einfach einen Bindestrich vor width zu setzen. Tantecks Hack ist wirklich heftig und hat Nebeneffekte.

BTW: schon wieder ein Thema, über das ich (schon länger) schreiben wollte und Du zuerst kamst. Gedankenübertragung?

3. | Knut Karnapp schrieb am 09. Oktober 2005 um 19:08

Stimmt Jens, mir gehts manchmal ähnlich mir fliegen ein paar Gedanken im Kopf rum, die ich unbedingt rüberbringen möchte und da les ich die am selben Tag woanders, komisch.

Zu den CC´s. Über die wollt ich eigentlich ein Extrathema starten, da ich dazu meine ganz eigene Meinung habe. Die Comments, die uns Microsoft anbietet wohl wissend, dass ihre Browser großen Stuss praktizieren. Und wohl erst 2006 einen Browser präsentieren, der den standardnahen Browsern ähnelt.
Zu Tantek´s, meines Erachtens wirklich genialem, Hack. Man muss sagen, dass keiner von anderen Möglichkeiten wusste als der “entwickelt” wurde. Ich hab dazu vor kurzem einen interessanten Podcast gehört. Ich glaub es war Tantek´s zweiter Vortrag bei den diesjährigen Web Essentials zum Thema Microformats.

Jeena stimmt was mit deinem Kommentar nicht? Ich meine ich hatte so einen Fehler schonmal, gib mal bitte Meldung, wenn du mehr mitteilen wolltest als da steht, danke.

4. | Jeena Paradies schrieb am 09. Oktober 2005 um 23:08

hm irgendwie hat das > meinen Kommentar kaputtgemacht, kannst du das wieder reparieren?

5. | Heiko schrieb am 10. Oktober 2005 um 8:34

Manchmal sind Hacks auch bei mir unverzichtbar, da man bestehende Quelltexte, oft nicht neu sondern nur “umstrukturieren” dürfen. Daher empfinde ich Conditional Comments wirklich eine elegante Lösung. Ich denke dass Hacks (zumindest einige) uns auch nach Erscheinen des IE 7 weiterhin beschäftigen werden, denn die Wünsche der Kunden beinhalten nicht immer nur den aktuellsten Browser, oft ist eher das Gegenteil der Fall.

6. | Knut Karnapp schrieb am 10. Oktober 2005 um 8:53

Jeena, leider seh ich im Adminpanel auch nur, das was hier zu sehen ist. Kannst du bitte genau beschreiben an welcher Stelle dir das Zeichen den Kommentar kaputt gemacht hat, damit ich da auf Fehlersuche gehen kann..danke.

Natürlich werden uns die 5er und 6er IE´s noch weiter beschäftigen, da es eben immer noch ein großes Verbreitungsproblem gibt. Wenn ein neuer Browser in dem Fall der IE 7 rauskommt dauert es einfach noch zu lange bis man wirklich auf den bauen kann. Die Verbreitung bzw. das Update müsste sich global in wenigen Wochen vollziehen lassen und eben nicht in Jahren wie bisher. Aber gut da ist wohl im Moment noch etwas viel Wunschdenken dabei. Zu empfehlen dazu: Doug Bowman´s Präsentation der Web Essentials. Auch auf die Gefahr hin, dass ich mich wiederhole, aber da gibts durchaus interessante Sachen zu hören.

7. | kk-works.de » schrieb am 14. Oktober 2005 um 8:51

[…] CSS Hack Management […]

8. | Jeena Paradies schrieb am 19. Oktober 2005 um 10:40

Ich wollte schreiben IE Gleich oder kleiner 6 und das kleiner Zeichen hat das ganze dann abgeschnitten.

9. | Knut Karnapp schrieb am 19. Oktober 2005 um 10:48

Danke für deinen Hinweis, ich werd mal schauen, ob man da was machen kann.

10. | CSS Hack Diät - Markup CSS, XHTML, Webstandards schrieb am 12. Dezember 2005 um 19:41

[…] CSS Hack Management […]

11. | Webkrauts » Organisation großer CSS-Dateien schrieb am 29. März 2006 um 22:11

[…] CSS-Hack Management . […]

Kommentar hinterlassen







Mit * gekennzeichnete Eingabefelder müssen ausgefüllt werden. Unangebrachte und anzügliche Kommentare können editiert oder gelöscht werden. Emailadressen werden nicht angezeigt. Folgende Elemente können in den Kommentaren genutzt werden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> .

Trackback-URL