Dieser Artikel ist Teil einer Serie:
Es hat etwas gedauert, aber die Serie über schönes neues CSS wird weiter fortgesetzt. Nach Textschatten mit CSS, alternativen Farbangaben, font-size-adjust und zuletzt dem General Sibling Combinator nehmen wir heute eine CSS3-Eigenschaft ins Visier, die vermutlich wirklich noch kaum einer kennt. Noch unterstützt quasi gar kein Browser appearance so richtig, aber man kann damit auch jetzt schon einige praktische Dinge anstellen.
Was kann man mit appearance anfangen?
Mit appearance kann man beliebige HTML-Elemente so aussehen lassen, dass sie wie die diversen Bedienelemente (Buttons, Textfelder) des Betriebssystems/Browsers aussehen. Ein (dämliches) Beispiel gefällig? Um einen Link wie eine Checkbox aussehen zu lassen, macht man folgendes:
a {
appearance:checkbox;
}Das geht in allen möglichen Kombinationen. Tabellen die wie Buttons aussehen? Buttons in Form von Checkboxen? Buttons die wie Tooltipps aussehen? Alles möglich.
Wozu das gut sein soll? Nun, während sicher noch ein gewisser … Rechtfertigunsbedarf für Konstukte à la Tabellen die wie Buttons aussehen
besteht, kann es hin und wieder durchaus sinnvoll sein, Elemente ein wenig zu verkleiden. Man denke an Vor/Zurück-Links in mehrteiligen Anleitungen oder AGB zum durchklicken – Warum sollten die nicht aussehen können wie Buttons?
Welche Browser verstehen appearance?
Eigentlich gibt es noch keinen Browser, der appearance richtig umsetzt. Teile dieser Eigenschaft kann man aus Mozilla-Browsern mit -moz-appearance und in Webkit-Browsern mit -webkit-appearance herauskitzeln. Wie der Test zeigt, geht da immer noch nicht viel, und die Dinge die funktionieren, verhalten sich nicht immer einheitlich. Man vergleiche nur mal die Checkboxen in Firefox und in Safari …
Somit ist appearance eigentlich nur ein klarer Kandidat für progressive Enhancement in Kombination mit größter Vorsicht und gründlichstem Testen. Elemente in Buttons verwandeln klappt in beiden Browsertypen ganz passabel und was den Rest angeht muss man eben von Fall zu Fall sehen was geht. Zum Abschluss darf ich noch auf die Referenz für -moz-appearance und die Referenz für -webkit-appearance (PDF, Seite 71) verweisen.
Kommentare (9)
Siegfried ¶
5. August 2008, 09:10 Uhr
Hmmm, u.U. könnte man diese Eigenschaft auch nutzen, um beispielsweise Tabellen eben wie Tabellen aussehen zu lassen. Und zwar nicht wie typische Browser-Tabellen, sondern eben wie Tabellen wie sie im jeweiligen OS nun mal aussehen. Also Elemente nicht verkleiden, sondern zur Darstellung der Elemente auf die Betriebssystemstandards zurückgreifen.
Das könnte eventuell durchaus die Zugänglichkeit erhöhen. Wenn man davon ausgeht, dass ein User sich eher seinen Desktop nach seinen Bedürfnissen einrichtet als seinen Browser (die Meisten Browsernutzer wissen nicht, wo man die Standardschriftgröße einstellt), könnten Seiten, die auf die Betriebssystem-GUI-Einstellungen zurückgreifen, besser zugänglich sein.
So etwas Ähnliches hat es schon mal mit Farbdefinitionen gegeben. Da konnte man z.B. die Hintergrundfarbe des Textes der Hintergrundfarbe eines Fensters in z.B. Windows anpassen. Hat unter Windows recht gut funktioniert. Leider nicht ohne Weiteres unter Linux. Und diese CSS Farbcodes sind heute, so weit ich weiss, "deprechated".
Marc ¶
5. August 2008, 09:24 Uhr
...kennt.
Peter ¶
5. August 2008, 09:27 Uhr
Ups. Fixed.
Marc B. ¶
5. August 2008, 18:25 Uhr
Das ist mal eine tolle Funktion. Die hätte ich schon öfters mal gebrauchen können ;) Hoffentlich wird die bald von allen Browsern unterstützt.
Ute ¶
6. August 2008, 10:45 Uhr
Wirklich schade, dass das noch kaum unterstützt wird, in vielen Fällen wäre das schon klasse, wenn es eingesetzt werden könnte.
Allerdings hast du Recht, man sollte im Sinne des Progressive Enhancements viel häufiger Eigenschaften nutzen, die zumindest teilweise unterstützt werden.
JoachimSp ¶
31. August 2008, 21:52 Uhr
Mir ist eben der Gedanke gekommen dass eine solche Funktion auch GEGEN einen Nutzer eingesetzt werden könnte, beispielsweise auf Websites mit betrügerischer Absicht.
Ich würde nicht damit rechnen, wenn sich beim Klick auf einen Haken oder einen Radio-Button plötzlich eine Website öffnet.
Denk ich da in die falsche Richtung oder kann dieses Problem wirklich auftreten?
Jürgen Jeka ¶
18. Juni 2009, 10:34 Uhr
Der Link zur Mozilla Dokumentation hat sich geändert:
https://developer.mozilla.org/en/CSS/-moz-appearance
Sven Finke ¶
24. Februar 2012, 07:43 Uhr
Ich denke diese Eigenschaft ist besonders praktisch um den Standard Look des Browsers zu entfernen.
Das gilt besonders - oder eigentlich nur? - für Formulare. Jeder der schon mal damit zu tun hatte weiß, es ist eine wahre "Freude" Formulare zu gestalten und optisch anzupassen. Besonders wenn nicht nur Text Inputs, sondern auch Select-, Radio- oder Checkboxen vorkommen.
Durch appeareance: none; lässt sich dieses Verhalten ausschalten und die Elemente sind anpassbar, wie jedes andere tag :)
Christopher ¶
10. Juni 2012, 20:23 Uhr
Mich würde es interessieren, wo du die ganzen Themen herbekommst... :)