WebKit-Appearance: Die lässtige Apfel-Krankheit

Eigentlich wurde in CSS3 die Eigenschaft Appearance geschaffen, damit ein Element wie jedes x-beliebige Bedienelement aussehen kann. Darin besteht ein gewisser Nutzen, um beispielsweise aus einem Input-Feld kinderleicht einen Button zu machen. Aber das Attribut ist bis dato in keinen Browser hundertprozentig umgesetzt und ausschließlich über Vendor-Präfixe ansprechbar. Apple hat seine WebKit-Engine so modifiziert, dass es für Webdesigner äußerst schwierig ist, Bedienelemente benutzerfreundlich zu stylen. Mittels -webkit-appearance:none; sagt man WebKit den Kampf an. Sämtliche damit angesprochenen Objekte werden rigoros zurückgesetzt. Allerdings zum Leidwesen des Designers. Denn dieser darf im Anschluss das komplette Element neu gestalten. Alle anderen Browser reagieren weniger stur. Firefox geht mit gutem Beispiel voran.

Dropdownlisten-Darstellung anhand meiner Monatsauswahl
Dropdownlisten-Darstellung anhand meiner Monatsauswahl

Gerade der Select-Tag bereitet mir einige Probleme. Durch den “Kill-Switch” verschwindet auch der Listenpfeil. Browserübergreifend entstehen dadurch Darstellungsunterschiede, da das Symbol mal sichtbar und dann wieder verschwunden ist. Die Lösungsansätze dafür sind vielfältig:

  • den Pfeil in allen Browsern ausblenden (klappt nicht zu 100%)
  • Elemente unverändert belassen
  • -webkit-appearance:none; in allen WebKit-Browsern setzen
  • WebKit-Appearance via Browserhack allein im Safari deaktivieren
  • den Pfeil via CSS selbst nachrüsten
  • mit den Unterschieden leben …

Egal, für welche Lösung man sich am Ende entscheidet, Apple hat hier eindeutig großen Mist gebaut. Es mag mir nicht in den Kopf gehen, warum ich die Bedienelemente in Safari nur mit brachialer Gewalt beeinflussen darf. Selbst !important zeigt keinerlei Wirkung. Google Chrome und Opera verwenden ebenfalls die WebKit-Engine, lassen aber eigene CSS-Angaben zu. Ganz selten braucht es den Holzhammer. Ich hoffe, dass die Zukunft bessere Möglichkeiten bringt und Apple einlenkt oder zur Umkehr gezwungen wird. Meiner Meinung nach sind weder WebKit, noch Vendor-Präfixe das Allheilmittel. Trotzdem wäre eine HTML-standardgerechte Engine ein sehr sinnvolles Mittel. Dies würde Webdesignern erheblich Zeit beim Testen von Webseiten sparen und so einiges an Nerven.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.