200903Okt

HTML/CSS: Safari ist nicht gleich Safari

Mit der Veröffentlichung von Safari für Windows hatte Apple den globalen Browsermarkt erneut beeinflusst. Der WebKit-Browser glänzt durch eine flotte JavaScript-Engine und tolle Entwicklertools. Die aktuelle Version 4 des Browsers läuft im Gegensatz zur ersten Beta-Version recht stabil (Ausnahmen bestätigen die Regel).
Wenn man Webprojekte für Kunden erstellt und diese einen Apple-Computer benutzen, empfiehlt sich das Testen der Website in Safari unter Mac OS X. Man könnte meinen, dass die Windows-Version identisch mit der Mac-Software ist: Theoretisch ist das der Fall, allerdings ist ein Webbrowser an die Darstellungsmethoden des laufenden Betriebssystems gebunden. Das betrifft vor allem die Berechnungsmethode, die zur Kantenglättung (Anti-Aliasing) benutzt wird. Dem Cocoa-Rendering von Mac OS X steht "ClearType" von Windows (XP und aufwärts) entgegen. Die Subpixel werden von beiden Engines unterschiedlich berechnet und so kann es daher auch zu Darstellungsunterschieden kommen. Diese Unterschiede zeichnen sich vor allem durch die Strichstärke und somit durch die Breite der einzelnen Zeichen aus. Auch wenn man per CSS die Breite eines Containers fest definiert, kann der Text in Safari unter Windows und Mac OS X unterschiedlich laufen, wie die Abbildung zeigt:

Safari Windows / Mac OS X

Bei Projekten, die für Safari optimiert werden müssen (also Mac OS X), geht wohl kein Weg daran vorbei, die jeweilige Website in der nativen Version des Apple-Browsers zu testen — der Mac mini ist ab 599,00 EUR zu haben. Alternativ kann man eine Website auch mithilfe von Online-Diensten wie BrowsrCamp, BrowserShots oder Litmus in Safari testen. Allerdings kann dieser Vorgang umständlich werden, da der Screenshot jedes Mal online erstellt und abgerufen werden muss.
Es gibt zudem eine alternative Font-Engine für das Rastern von Windows-Schriftarten: GDI++ kommt zwar etwas näher an das Mac OS X-Rendering heran, allerdings ist auch diese Methode nicht mit dem Original zu vergleichen.