Schönes neues CSS: Die Appearance-Eigenschaft

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

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)

  1. 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".

  2. Marc

    5. August 2008, 09:24 Uhr

    die vermutlich wirklich noch kaum einer.

    ...kennt.

  3. Peter

    5. August 2008, 09:27 Uhr

    Ups. Fixed.

  4. 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.

  5. 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.

  6. 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?

  7. 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

  8. 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 :)

  9. Christopher

    10. Juni 2012, 20:23 Uhr

    Mich würde es interessieren, wo du die ganzen Themen herbekommst... :)

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon