Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS3 und Appearance: Wenn einfacher Text zu einem Link oder Button wird

Mit CSS3 gibt es viele neue Möglichkeiten, das Aussehen von Elementen zu beeinflussen. Mit der Eigenschaft „appearance“ können einfache Textelemente aussehen und sich „anfühlen“ wie Links oder Buttons, ohne ihre Funktionalität zu besitzen.

So wird aus einem Text ein Link, der keiner ist

Normalerweise wird ein Link mit dem A-Element ausgezeichnet und erhält dadurch seine vorgesehene Funktion und das entsprechende Verhalten. Das heißt, er wird – wenn man per CSS nichts anderes festlegt – unterstrichen und der Mauszeiger wird zur zeigenden Hand beim Darüberfahren:

<a href="http://www.t3n.de/">t3n Magazin</a>

Tauscht man das A-Element nun mit einem SPAN-Element, wird aus dem Link ein schnöder Text. Mit „appearance“ lässt sich dem Text jedoch das Aussehen eines Links verpassen, sodass er unterstrichen wird und beim Darüberfahren die zeigende Hand erscheint:

<span style="appearance: hyperlink">t3n Magazin</span>

Rein optisch unterscheiden sich beide Varianten nicht voneinander. Allerdings passiert bei der unteren Variante nichts, wenn man versucht, den angeblichen Link aufzurufen.

Das gleiche Prinzip lässt sich auch für Formularelemente anwenden:

<span style="appearance: checkbox">&nbsp;&nbsp;&nbsp;</span>

Im Beispiel wird aus drei Leerzeichen eine Checkbox. Die Leerzeichen sind nötig, um dem SPAN-Element die nötige Breite zu geben, damit die Checkbox darin Platz hat. Der Inhalt des SPAN-Elementes wird dabei ersetzt; nur Breite, die sich durch die drei Leerzeichen ergibt, bleibt.

Auch hier unterscheidet sich rein optisch die falsche Checkbox nicht von einer echten. Auch das Hervorheben beim Darüberfahren mit der Maus ist identisch mit einem echten Formularelement. Aber auch hier ist das Ganze ohne Funktionalität.

Auf diese Weise lassen sich alle Formularelemente simulieren. Gerade wenn die Funktionalität eines Formularelementes über JavaScript realisiert wird und die eigentlich gedachte Funktionalität gar nicht genutzt wird, lässt sich das mit dieser CSS3-Eigenschaft gut realisieren.

Bisher unterstützt zwar noch kein Browser diese Eigenschaft; allerdings gibt es bei Gecko- und Webkit-Browsern die Eigenschaft „-moz-appearance“ beziehungsweise „-webkit-apperance“, über die zumindest ein Teil der „appearance“-Möglichkeiten genutzt werden kann:

<span style="-moz-appearance: button">Buttonsbeschriftung</span>
<span style="-moz-appearance: textfield">Formulareingabe</span>
<span style="-moz-appearance: radio">&nbsp;&nbsp;&nbsp;</span>
<span style="-moz-appearance: checkbox">&nbsp;&nbsp;&nbsp;</span>

In den ersten beiden SPAN-Elementen wird der Text als Buttonbeschriftung beziehungsweise als Formulareingabe dargestellt. In den letzten beiden Elementen wird der Text durch einen Radiobutton beziehungsweise durch eine Checkbox ersetzt.

Die Möglichkeit, einen Text wie einen Link („hyperlink“) oder wie ein Passwortfeld („password“) aussehen zu lassen, wird bei den jeweiligen Vendor-Varianten nicht unterstützt.

Tabs und Scrollbars wie im Betriebssystem

Die Varianten „-moz-appearance“ und „-webkit-apperance“ der CSS3-Eigenschaft unterstützen zwar nur einen Teil von „appearance“. Dafür gibt es andere Möglichkeiten. So lassen sich HTML-Elemente so aussehen lassen wie Tabs oder Scrollbars, wie man sie aus dem Betriebssystem kennt:

<p><span style="-moz-appearance: tab">Tab 1</span>
<span style="-moz-appearance: tab">Tab 2</span>
<span style="-moz-appearance: tab>Tab 3</span></p>
<p style="-moz-appearance: tabpanels">Tabinhalt</p>

Die drei SPAN-Elemente simulieren Tabs, das zweite P-Element simuliert den Tabpanel, also den Bereich für den Inhalt des aktuellen Tabs. Allerdings müssen per CSS die einzelnen Elemente positioniert und gegebenenfalls Abstände optimiert werden. Auch die Funktionalität muss nachgerüstet werden, zum Beispiel mittels JavaScript. Optisch passen sich die Tabs der jeweiligen Darstellung des Betriebssystems an:

CSS3: Appearance
CSS3: ein Tab, der keiner ist

Auch Scrollbars lassen sich so im Stile des Betriebssystems darstellen – allerdings auch hier ohne Funktionalität:

<p style="-moz-appearance: scrollbarbutton-down"></p>

Im Beispiel wird ein Scrollbarbutton mit Pfeil nach unten dargestellt. Eine Übersicht aller Werte für „-moz-appearance“ gibt es bei Mozilla. Gedacht ist „-moz-appearance“ ist erster Linie für die Entwicklung grafischer Benutzeroberflächen für Mozilla-Anwendungen. Aber für Websites funktionieren sie eben auch.

Was haltete ihr von „appearance“? Welche Anwendungsmöglichkeiten könnt ihr euch vorstellen und setzt ihr sie ein?

Weiterführende Links zum Thema CSS3:

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Finde einen Job, den du liebst