5. August 2008, 10:24 Uhr
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.
Siegfried ¶
Geschrieben am 5. August 2008 um 11: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”.