Safari 3 Hack

Daran hat man sich schon gewöhnt: Alle Browser rendern ein wenig anders - haben etwas andere Metriken, und selbst wenn man alles absolut positioniert, sind kleine Unterschiede auszugleichen. Wer möchte, kann ja mal ein simples Formular mit mehreren div-, input- und textarea-Tags machen und sie so anordnen, dass sie alle genau untereinander liegen und das Ganze per CSS. Und dann mal im Firefox, im IE und im Safari anschauen und dann mal ausmessen, wo man so ankommt. Viel Spass dabei :)

Klar, man kann ein Javascript schreiben, das dann alles richtet. Aber eigentlich will man ja die Darstellung (Layout) nur per CSS richten. Dafür gibt es die CSS-Hacks. Kleine Ungereimtheiten zwischen den Browsern werden genutzt, um Browser-spezifische Angaben zu machen. Beispiel für ein FF/IE-Hack:

.class1 { width:200px; width:expression('202px'); }

Da der FF nichts mit dem expression-Ausdruck anfangen kann, nimmt er für width den Wert 200px an; der IE wiederum interprtiert width:expression und ändert, nachdem er zunächst für width 200px eingetragen hat, den Wert für width auf 202px ab. Alternativ kann der IE auch per bedingter Kommentierung sein CSS laden:

<!--[if IE]>
<style type="text/css">@import url(internet_explorer.css);</style>
<![endif]-->

Wenn man ein wenig googelt, findet man immer wieder Seiten, wo solche Wunderdinge beschrieben werden. Und auch für den Safari gibt es solche Hacks. Oft liest man von #-Zeichen, die man in das CSS hineinsetzt, die dann den Safari daran hindern, die besteffenden Anweisungen zu interprtieren. Leider funktioniert das ab Safari 3 nicht mehr! Die wohl zur Zeit beste Lösung ist auf eine propietäre Selector-Beschreibung zurück zu greifen (ist allerdings für Opera 9 auch zutreffend):

.class1 { width:200px; width:expression('202px'); } @media screen and (-webkit-min-device-pixel-ratio:0) { .class1 { width:205px; } }

Die @media ...-Eintragung enthält dann die spezielle Safari 3 CSS.