Vor- und Nachteile der CSS-Hacks

Zu einem umfassenden CSS-Debugging gehört, sich mit den eigenen Schwächen und potenziellen Fehlern auseinander zu setzen und den Aufbau sowohl des (X)HTML- als auch des CSS-Dokuments zu hinterfragen, bevor man sich entscheidet Workarounds und später CSS-Hacks oder Conditional Comments einzusetzen. Doch was ist besser? Was ist praktikabler und was ist zukunftssicherer?

CSS-Hacks haben den Vorteil, dass man sie direkt in die CSS-Datei schreiben kann. Das gestaltet eine zukünftige Layoutanpassung wesentlich einfacher, insbesondere wenn man mit einer zentralen CSS-Datei arbeitet. Der Vorteil ist allerdings gleichzeitig ein Nachteil. Der Entwickler hat eine CSS-Datei erstellt und bemüht sich, sie "sauber" zu halten. Anschließend "beschmutzt" er die CSS-Datei mit Hacks und setzt den standardkonformen Browsern unnötigen Code vor.

Falls der Entwickler die Hacks in eine zusätzliche CSS-Datei auslagert, lässt sich sein Ergebnis nicht mehr einfach warten, weil er die CSS-Angaben auf mehrere Dateien verteilt und mehrere Dateien bearbeiten muss, um relativ kleine Anpassungen vorzunehmen. Durch die zusätzlichen CSS-Dateien entstehen weitere HTTP-Anfragen, die sich negativ auf die Performance der Website auswirken können. Hinzu kommt, dass sich die selektorbasierten CSS-Hacks in ihr Gegenteil verkehren und dadurch Probleme verursachen können, weil sie nicht immer nur eine Browserversion ansprechen, sondern häufig auch mehrere.

Ein weiteres Problem ist die Vergänglichkeit der CSS-Hacks. Das betrifft vor allem die auf Basis von CSS3-Selektoren, die beispielsweise Opera oder Mozilla ansprechen sollen. Schon in der nächsten Version des Browsers könnte es passieren, dass die Hacks nicht mehr wirken. In der Vergangenheit konnte man an mehreren Fällen die Schwäche der Selektoren-Hacks erkennen. Der weiter oben genannte Star-HTML-Hack spricht nicht nur den IE 5 auf Windows, sondern auch den IE 5 auf dem Mac an – was nicht immer notwendig gewesen wäre, weil der IE 5 auf dem Mac in der CSS-Unterstützung etwas weiter war. Hier musste man darauf achten, dass man den IE für Mac außen vor lässt.

Vor- und Nachteile der Conditional Comments

Die Schwäche der CSS-Hacks, nicht eindeutig eine Browser-Version anzusprechen, sondern eine "Fähigkeit" abzufragen, ist die Stärke der Conditional Comments. Sie können gezielt eine bestimmte Version des IE beeinflussen. Auch wenn es eine neue IE-Version gibt, ändert sich an der Gültigkeit der Abfrage "Wenn du IE 6 bist, dann ..." nichts. Ein weiterer CC-Vorteil ist, dass man die CSS-Datei "sauber" und schlanker hält, weil sie nicht mit CSS-Hacks bespickt ist.

Sicherlich, auch die CC haben Nachteile. Zum einen handelt es sich um eine proprietäre Technik. Dann sind sie in der (X)HTML-Datei zu notieren, was vor allem bei statischen Websites zusätzlichen Aufwand bedeutet. Bei Redaktionssystemen wie WordPress relativiert sich der Nachteil, weil man die Angaben für den Kopfbereich in der Template-Datei header.php notiert.

Empfehlung

Möchte man lediglich IE 5 bis 7 zähmen, setze man Conditional Comments ein. Sind es nicht mehr als zwei bis vier CSS-Regeln, schreibe man sie in den Kopfbereich des (X)HTML-Dokuments:

<!--[if lte IE 7]><style type="text/css">
.quelltext { width: 510px; }</style><![endif]-->
</head> 

Das ist performanter, als eine zusätzliche HTTP-Anfrage durch eine CSS-Datei zu generieren. Erst bei mehreren Regeln kommt eine weitere CSS-Datei zum Einsatz, wobei man sich kritisch hinterfragen sollte, ob das wirklich notwendig ist und ob man nicht etwas übersehen hat, das die Fehler verursacht.

Ergebnis der Umfrage darüber, was Webentwickler bevorzugt einsetzen (Abb. 2) Der Autor hat in seinem Weblog eine Umfrage darüber gestartet, was Webentwickler bevorzugt einsetzen. Das Ergebnis zeigt Abbildung 2. An der Umfrage haben sich nach knapp zwei Monaten rund 170 Webentwickler beteiligt. Mehr als die Hälfte (56 %) bevorzugen Conditional Comments, wenn es darum geht, den IE im Zaum zu halten. Fast ein Viertel setzt sowohl CC als auch Hacks ein. Lediglich rund ein Fünftel nutzt ausschließlich CSS-Hacks.

Vladimir Simovic
ist Geschäftsführer und Gründer der perun.net webwork gmbh. Er ist Autor mehrerer IT-Fachbücher (WordPress, CSS) und hat Webwork-Artikel für diverse IT-Fachzeitschriften verfasst.