CSS-Hack für Reparatur der Darstellung

Browserfehler austricksen

Die größten Probleme beim Erstellen einer Webseite hatte man damit, dass die verschiedenen Browser wie Internet Explorer, Firefox, Safari & Co. gleiche Codezeilen unterschiedlich interpretieren. Hauptproblem beim Webdesign war dabei die Interpretation der CSS-Angaben. Vor allem die scheinbar überarbeitete Version des Internet Explorer 7 sorgte für Ärger. IE 5 und 6 waren eine Katastrophe und verstanden die halben Einstellungen nicht, IE 7 verstand sie zum Großteil, interpretierte sie aber sehr eigen.

Dem Laien mag das unverständlich sein, doch eine 200 Pixel breite Spalte muss noch lange keine 200 Pixel breit sein, wenn der Browser keine Lust dazu hat. Manchmal hat man das Glück, dass sich die einzelnen Programme einig sind, doch meistens trifft man auf Situationen, in denen dies schlichtweg nicht der Fall ist. Mittlerweile ist der Internet Explorer seltener im Einsatz und die letzten Versionen arbeiten verlässlicher, die anderen Browser wie Chrome oder Firefox interpretieren CSS so wie es eingestellt ist.

CSS-Hack reparierte die Ansicht des IE

Falsche Vermutungen des Microsoft-Browsers sorgten reichlich für Ärger und mit jeder Version war es dann ein Stück weit anders. Dann hilft nur noch ein CSS-Hack. Es handelt sich beim CSS-Hack um einen Trick, mit dem Browser auf eine falsche Fährte gelockt werden soll, vor allem der Internet Explorer. Es ist schon mühsam, dass der IE gleiche CSS-Angaben anders interpretiert als Firefox, Opera, Safari und andere Konkurrenten, doch noch schlimmer und mühsamer wird es dadurch, dass die einzelnen Versionen unterschiedlich agieren.

Will man beispielsweise, um obiges nochmals zu verwenden, eine Spalte auf 200 Pixel fix beschränken, dann formatiert man das DIV im CSS so:

.spalte { width:200px; }

Das ist ja nicht so schwer. Trotzdem kann es sein, dass der Internet Explorer die Spalte breiter oder schmäler darstellt. Mit

.spalte { width:200px; *width:205px; }

teilt man via CSS dem DIV mit, dass es 200 Pixel breit sein soll, aber der Internet Explorer (nur er fühlt sich durch den Stern angesprochen) geht auf 205 Pixel, um die gleiche Darstellung zu erreichen. Klingt unsinnig, ist es aber nicht. Der Stern beim CSS-Befehl ist ein CSS-Hack, ein Trick, um für den Internet Explorer eine eigene Angabe eintragen zu können, ohne die anderen Browser negativ zu beeinflussen.

Nun kann es aber vorkommen, dass der IE7 nun richtig darstellt, der IE6 aber weiterhin die Spalte zu breit oder zu schmal anzeigt. Dann kann man mit zwei Hacks arbeiten:

.spalte { width:200px; *width:205px; _width:185px; }

Die erste Angabe gilt wieder für alle Browser, die zweite (Stern) für alle Internet Explorer, die dritte (_) nur für den Internet Explorer 6. Der IE7 bekommt seine Angabe in der zweiten Option, interessiert sich für den Unterline (Unterstrich) aber gar nicht und so wurde es möglich, für den IE6 losgelöst vom IE7 einen CSS-Hack anzubieten.

Eigentlich traurig, weil alle Programme die gleichen Angaben gleich verarbeiten sollten, aber einen Standard gibt es nicht. Im Webdesign hat man oft das Problem, dass der Auftraggeber nicht verstehen kann, warum man Tage für das Layoutprogrammieren braucht - die unterschiedlichen Interpretationen sind der Grund dafür und manche Fehler kann man mit dem CSS-Hack überwinden - leider nicht alle.

CSS-Hack in der Praxis

Schaut man in die Zugriffsstatistik, dann ist der Anteil am Internet Explorer sehr gering geworden, aber groß genug, um ernst genommen zu werden. Doch braucht es solche Hacks zum Glück nicht mehr, weil die neuen Versionen der aktuellen Browser CSS richtig interpretieren.

Es ist aber wichtig diese Hacks zu kennen, da man immer wieder auf alte CSS-Dateien stößt, die überarbeitet werden sollen - etwa bei einem Relaunch. Und dann sollte man wissen, was es mit diesen Angaben mit Stern auf sich hat.

Lesen Sie auch

Der CSS-Einstieg gelingt recht einfach, weil die Formatierungen der verschiedenen Seitenelemente auch recht einfach erfolgen können. Man braucht aber Disziplin, dass man immer auf gleiche Art und Weise arbeitet und nicht einmal in der CSS-Datei Abstände eingibt und einmal direkt beim Inhalt. Und man braucht eine einheitliche Art, mit CSS zu arbeiten.

In den ersten Jahren der CSS-Verbreitung brauchte es sogar Tricks wie den CSS-Hack, damit der Internet Explorer auch verstehen konnte, was man eigentlich von ihm will.

Davon abgesehen muss man wissen, wie und wo man die CSS-Definitionen einbauen kann, warum des Vorteile bringt, CSS extern zu betreiben und wie die richtige Schreibweise zu erfolgen hat.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel