Sie sind hier: Startseite -> CSS-Grundlagen -> CSS-Hack

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

Der Internet Explorer ist in der Zwischenzeit schon Geschichte, denn selbst Microsoft hatte mit dem Edge einen neuen Browser entwickelt, der aber auch nicht mehr angenommen wird. Google hat mit Chrome das Sagen, der Firefox oder Programme wie der Safari für die Apple-PCs sowie viele Lösungen für mobile Geräte sind zu berücksichtigen und behandeln CSS so, wie es vorgesehen war.

Trotzdem gibt es noch auf sehr vielen Seiten die Hacks, um den IE zu beeinflussen. Damit arbeitet man nicht mehr, aber man sollte diese Tricks und ihren Hintergedanken kennen, wenn man darauf stößt. Weil Sinn macht der Stern für die aktuellen Browser gar nicht und sie reagieren auch darauf nicht.

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

CSS Hack für BrowserArtikel-Thema: CSS-Hack für Reparatur der Darstellung
Beschreibung: Mit 👍 CSS-Hacks kann man fehlerhafte Darstellungen der ✅ Browser reparieren, was in den früheren Versionen des Internet Explorer oft nötig war.

Kategorien

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

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