Wer bei der Entwicklung eines Magento Shops der gängigen Empfehlung folgt, seine Themes auf dem default-Theme von Magento aufzubauen, der ist natürlich dankbar für das bestehende html-Gerüst. Eine Sache hat mich aber schon öfter gezwickt, nämlich die unterschiedliche Darstellung der Button-Elemente in den verschiedenen Browsern.
Vor meiner Magento-Zeit habe ich button-Elemente nicht so gern verwendet, da z.B. der IE den Button bei einem Mausklick animiert, der Firefox aber nicht. Doch aufgrund der Menge an buttons im Magento Theme habe ich mich für’s erste damit angefreundet.
Als Beispiel für die verschiedenen Darstellungen habe ich mir hier Firefox 4 und Safari 5.0.5 angesehen. Als Beispiel-Design habe ich mir das Standard Theme auf demo.magentocommerce.com zur Brust genommen und Screenshots vom gleichen Button in beiden Browsern erstellt.
l. Firefox, r. Safari (Photoshop)
In der Vergrößerung und mit Hilfslinien erkennt man es ganz deutlich, 1px Versatz!
Für den typischen Programmierer nur ein müdes Achselzucken wert, für unsere Screendesigner der blanke Horror. Doch da ein Progger nichts mehr fürchtet als den Zorn eines aufgebrachten Grafikers, der sich in seiner Arbeit nicht erkannt sieht, muss natürlich eine Lösung her.
Nun kann man zwar auf CSS-Hacks zurückgreifen, doch ausgerechnet der für Webkit-Browser zuständige ist nicht w3c-valide. Zudem gilt der Hack für alle Webkits, also auch für Google Chrome, der buttons wiederum ganz anders darstellt als der Safari (trotz gleicher Engine wohlgemerkt).
Eine spezifische Lösung muss also her. Die für mich eleganteste ist die Benutzung einer kleinen JavaScript-Datei namens CSS Browser Selector. Das Skript wertet den useragent des Browsers aus und schreibt entsprechende Kürzel als Klassennamen in das html-Element einer jeden Seite.
Durch diese Klassen in oberster Ebene könnt ihr nicht nur den Browser und dessen Version gezielt ansprechen, sondern auch das Betriebssystem. Um also dem Safari pauschal zu sagen, er soll die Buttons bitte schön einen Pixel höher ansetzen, schreibt ihr einfach folgendes:
.safari button {
margin-top: -1px;
}
Natürlich müsst ihr dabei die üblichen CSS-Regeln beachten wie z.B. die Spezifizität, das Beispiel hier dient nur der Veranschaulichung.
Mit 1,3 KB ist das Skript ein Fliegengewicht, weshalb der Mehrwert deutlich überwiegt. Mit diesem wunderschönen Skript könnt ihr eure zukünftigen Websites also völlig valide und sehr gezielt stylen.